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
Works in Any Theme
Drift will work in any theme.
Works with Total CMS
Drift works great inside Blog List and other Total CMS layouts.
Animate Any Stack
Drag any stack you want into Drift in order to animate it.
All CSS Properties
You can animate any CSS property that you would like!
Animate To/From
You can animate from an element's default state to a new state or vice versa.
Animate on Scroll
Trigger animations based on the scroll position of the page.
Scroll Parallax
You can have animations track the scroll so that the elements only animate as the webpage scrolls.
Scroll Inertia
Animations can continue even after scrolling as stopped.
Animate on Hover
Animate your content on hover. You can also reverse the animation on hover out.
Split Text
Split your text into parts and animation letters, words, or lines individually.
Type Text
Animate text in a typewriter-esque effect. You can even overwrite text with new content.
Scramble Text
Reveal your text content with this interesting decoder animation.
YoYo Animations
Make your animations automatically reverse after they have completed.
Repeat Animations
Repeat your animations any number of times or run them infinitely.
{{{ icon }}}
{{ title }}
{{{ summary }}}
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.
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
Drift Demo Project
Uploaded by Weaver's Space
{{ title }}
{{{ description }}}
Uploaded by {{{ from }}}
Updates
v1.1.2
- Fixed minor corruption in the plist file with the stack tags and subtitles to possibly not work
v1.1.1
- Update GSAP animation libraries to latest version
v1.1.0
- New setting in the text animation stacks that will wait for custom fonts to load before the animation happens. This an help with some animation issues in some cases when a font does not load before the animation is triggered.
- Updated the GSAP library to the latest version
v1.0.2
- New online Help links when access from inside Stacks Library.
- Improved messages when stacks are missing from library in a project.
v1.0.1
- Fixed Type text type difference bug
- Fixed Scramble text issue with replace words
- Better default scroll trigger settings
- Repsonsive Animations now support any theme with the custom setting
- Improved error checking
- Improvements to various setting organization and labels
v{{ version }}
{{{ notes }}}
© 2025 Weavers Space | Terms of Service | Privacy Policy