Source | Drift
Demo (Drift)
Animate To
You can animate any element on the page from it's default natural location to a completely new location or style. This is how most interactive animations will be built. In the demo below, the green box rotate and move 300px to the right.
Animate From
You can animation any element on the page from any particualar location or style into it's default state. This is normaly used for animating content onto the page. In this demo, the purple square will shrink down and flip on the page.
Yoyo & Repeat Animations
When an animation is set to yoyo, it will animate and then automatically reverse back to it's starting location.
You can also repeat an animations as many times as you want, as well as repeating infinitely. When repeating you also have the ability to not reset values for each interation. For example, you could have a box move 50px. On the repeat, it can then move another 50px.
Type Text
This demo shows two different types (there are more) of effects that you can achieve. The first demo types over an existing sentence. The second demo types out a new sentence from nothing.
Drift Stack from Weaver's Space
Drift Stack from Weaver's Space
Scramble Text
I will admit that this effect probably has limtied use cases. However, it's cool that we have it. This demo unscrambles text in order to unveil your content. This could be an intersting way to reveal secret content in a fun way.
XOXOXOXOXOXOXOXOXOXOXOXO
Split Text
Split Text can split your text into lines, words or indicidual letters and animate them individually.
This demo illustrates all 3 ways you can split up your text. It then animates them in a seriously cool way. Make sure that you watch the last animation. It's like the text is elastic!
SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.
SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.
SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.
Scroll Animations
All of the animations above are triggered on hover. However, they could all also be easily triggered based on scroll as well. You can make an animation trigger when the stack reaches a certain part of the page. However, you can also tie the animations to the actual scrolling position. Below should some of this in action.
The first demo of SplitText will trigger the entire animation just after the container scrolls into view. Notice how with the second demo with the square, the animation tracks the scrolling position. The square will animate as you scroll (forward and backwards). There is also an inertia to the square animation so that the animation continues for a little bit when you stop scrolling. This gives your animations a much more natural and organic feeling.
SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.
Time to Show Off
Now it's time to show off a litlte bit. Below is a scroll based animation where the clouds and hot air balloons will animate as you scroll the page. This is a very real world scenario. Drift can do so much. This example only shows you a sliver of what you can unlock with your imagination.
