Drift Pro

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.

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 change 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 (easy with Drift Pro and F6) so that it's easier for you to see this effect in action.

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!

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.

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.

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.

This demo is very similar to a demo for Drift (non-pro). However, using Drift Pro really allows you to reduce the number of stacks needed to build the page. We also have a lot more flexbility since the entire animation can be done with 2 Drift Pro stacks. The balloons even move in randon distances (up and down).

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.