Source | Drift
Demo (Drift Pro)
Stagger Animations
In this demo, there is a single Drift stack used to animate all 3 boxes. By default, all of the boxes would start their animations at the same exact time. However, that is not very exciting. Drift has a feature that allows you to stagger the start times by a specific amount. You can even control how to determine which starts first or even set it to be random.
Timeline Animations
This demo really starts to show the power of Drift. We have a built an animation timeline with 10 different animations. Some animations happen in parallel. Others wait for parts of the animation to complete before it starts.
In this timeline, we are animating individual components independently. It also animates the boxes as an entire group as well. This is also the first demo where we start animating more than just the position of the elements. Notice that the colors of all the boxes cahgne to red towards the end of the timeline.
While this demo does only use the generic Animate stack, you can use every one of the Drift stacks from the demos further down on this page inside of your timelines as well.
Type Text
This demo types new words at the end of a static sentence. This is a geat effect that I have seen used in many effective ways across the web. To achieve this effect, we are using 8 Type Text stacks inside of a Drift Timeline.
The newly typed words have been styled differently so that it's easier for you to see this effect in action.
Weaver's Space: Let's hover here
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.
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.
Path Animations
The Motion Path stack allows you to animate any element along an SVG path. There are some simple built-in paths. However, the power comes when you create your own SVG path. Below uses a custom S-Curve path to animate the WS logo along.
The path in this demo has been made visible. In your animations, the path would be made invisible. Also notice how the icon rotates to follow the curvature of the line as well. This is a configurable option. The orientation of the element going along the path can be locked.
Draw SVG
Draw SVG allows us to take our SVG images and draw them dynamically on the page. As you can see below, this provide as really elegant effect.
To achieve this effect, you will need to be able to add classes or id attributes to the parts of the SVG that you plan on drawing.
Morph SVG
Morph SVG is magical. There is no other way to put it. Morph allows you to morph between SVG paths. See below how the box morphs into a star. Pretty mind blowing right?
There is a special debugging tool that ships with Drift to help you fine tune the morphing between your SVG shapes.
Advanced Stagger
This demo shows some more advanced use cases for staggering your animations. Drift can intellegently set the starting point of your animations within a grid of items. While we have this animation on loop so that you an enjoy it over and over again. This would make a very elegant way to animate a grid of elements or images onto the page.