image

Animate stack

Add stunning animations to your Source content to bring your web pages to life.

Lightweight animation

Source is all about being lightweight and efficient. That's why for our companion Animate we use a tiny JavaScript library (<3kb) with no dependencies to power stunning animations on your web pages.

This page demostrates a number of the options that are available to you - as such it uses a lot of animation (and a lot of different animations). For real projects it is always best to exercise restraint with these things and use subtle animations only where you think it will add genuine value / added interest.

Embedded in Source

There are 2 methods for adding animations to your Source web pages.

image

Source Layout stacks

Animation options have been built right in to the Source Layout stacks: Container, Container Plus, Grid, Grid Plus and Grid Plus Pro.

image

Animate zones

To animate content you can simply drop your desired stacks into an Animate zone stack. What's more you can even nest these to create animations within animations!

Use other frameworks too?

This Animate zones stack will work in any framework! That's right, this stack isn’t locked down to Source so that you can make use of these lightweight animations in any of your projects.

11 animation options

Choose from 11 stunning animation types.

Note here that we have set up animations on each individual Source Grid item.

Fade

Slide up

Slide down

Slide right

Slide left

Zoom in

Zoom out

Flip up

Flip down

Flip left

Flip right

Complete control

Along with selecting the animation type, you can also set up custom delays, durations and easings. You can also opt to have animations repeat or just happen once.

There is also the option to completely disable the effects on small or touch devices.

Delay 400ms

Delay 600ms

Delay 800ms

Delay 1000ms

What are you waiting for?

Add Source Animate to your Source projects today to inject some additional visual interest to your web pages!

You can buy this stack on its own or as part of our hugely discounted stacks bundle (find out more).