Modular Animation

When using a framework like Knockout, it's important to abstract animations from styles & to think of them as modular classes. For instance, you may want to apply an animation to set of three headlines with the classes <class>Headline<class> <class>M<class>. But you won't likely prefer that animation to play on every single instance of <class>Headline<class> <class>M<class> across the whole site. In such a case, it's useful to create a new class like <class>Anim - Card Headlines<class> & apply the animation to the class. This is best done on a dummy element, where you can target the simple class itself.

When the animation is then applied to the class, we can append it to any element to achieve the animation independent of any atomic classes assigned to the item.

Generally, an animation class will not carry any style declarations except for declarations that are exclusive to the animation. For instance, if the animation includes a transform rotate, the class might carry a transform setting declaration defining the origin point for the rotation.

This approach also comes in useful for creating interdependence between multiple items. For instance, in the case of a series of hide/show FAQ boxes, we may want to close all open boxes before opening the box that was clicked on. We can do that using two different classes, <class>Anim - FAQ Open<class> & <class>Anim - FAQ Close<class>. This way, we close all items with the class <class>Anim - FAQ Close<class> before opening the <class>Anim - FAQ Open<class> that is a child or sibling of the click target. Since Webflow only allows a single target relationship declaration per class within an animation, the use of multiple classes is the only way to accomplish this type of complex animation.