Very good article.
Juliano Maia
11

Hey Juliano Maia

Thanks for the kind words! It’s pretty interesting/cool what you can achieve once you start playing around with the code :D

So, you’d like to animate panels in different scenarios?

I can’t see this being too much of an issue. You are likely going to need a little JavaScript to help you out for finer control over when things should animate if basing on add/remove.

If you refer to the demo, there are some animations for flipping a panel and increasing the size of a panel on hover.

I think animating the transform property is going to likely be your best bet.

Let’s say for example, we create a new panel and add it to the layout(this must go before the focus curtain if one is being used)

We could have a class such as dw-panel--entering for newly added panels.

Let’s assume this class adds an animation that slides in a panel from the bottom and also fades in. Something maybe like;

@keyframes panel-enter {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dw-panel--entering { animation: panel-enter .5s; }

When we add the new panel to our layout we could then hook into when the animation ends and remove the class on end using animationend.

Hope that helps!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.