Drift

Powerful Animations Made Easy

Drift is a set of powerful animation stacks. You can animate any stack that you add into the Drift stack. There are also a set of text animation stacks with some really amazing effects. The sky is the limit with what you can achieve with Drift. For even more powerful animations, make sure you check out Drift Pro.

Key Features

Demo

Demo Controls

All of the demos below can be triggered by hovering over them. They are set to reverse their animations on unhover. This behavior is configurable inside of the Drift stacks.


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.

The newly typed words have been styled differently (easy with Drift and F6) so that it's easier for you to see this effect in action.

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.

Cloud
Cloud
Cloud
Cloud
Drift
Drift Text
Drift Text
Drift split

Reviews

We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.

Screenshots

Tutorials

Loading...

Downloads

Updates

See all updates Thanks!

You may also like…

HANGOUTS

Next Hangout Session
Friday, June 28

Subscribe

For product releases and updates by email, please subscribe below.

© 2024 Weavers Space | Terms of Service | Privacy Policy