This release is all about Animations. Foundation 6 has has an Animation In stack for a while and it’s… worked. We deserve better though! I have been working a lot on animations in some new stacks and it has inspired me to revamp the animations that we get out of the box with Foundation 6.
There are 3 new Animate stacks that allow you to configure preset animations on click, hover, on page load and when scrolled into the viewport. The Animate Timing swatch allows you to centralize the animation timing so that you can keep times in sync across multiple animation stacks. However, you can also provide local overrides if needed.
There are 3 new animate swatches inside of the Swatch Pack. These swatches allow you to create predefined animations that you can apply to as many elements as you want through a simple class. these swatches are similar to the Animate stack but have more flexibility and additional controls.
Another new addition to the Swatch Pack is a new Toggler on Scroll swatch. This swatch is based on the existing Toggler swatch but now also allows you to add a class to any elements when it scrolls into / out of the viewport. While I was at it, I also spruced up the original Toggler swatch with some new features. Both of the Toggler swatches are very powerful swatches.
While I was recording videos on the new features I decided to record a few more. This one in particular has nothing to do with this release however, it’s a good tutorial on how to use the Transition swatch in order to create styles on hover. The same exact concept can be used in conjunction with the Toggler stacks to create great animations only limited by your imagination.
As I said earlier, I have been busy working on a lot a animation stacks lately. I should start releasing these soon. My goal is to get them out before the Weaver’s Space Summit next month. Keep your eyes peeled!