image

image

Animate

Scroll-triggered animations

A lightweight animation solution to bring additional visual interest to your RapidWeaver / Stacks projects.

Lightweight animation

Lots of websites these days use animation to further enhance visual interest. Our Animate stack utilises a tiny JavaScript library (<3kb) with no dependencies to power stunning animations on your web pages.
Scroll down the page and see the different animations triggered as you go!

Animate anything

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

image

Source Layout stacks

If you use Source, then 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! Although initially designed to complement Source, the stack isn’t locked down only to Source. As such 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

Get Animate

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes Animate and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2


image

Animate

Stunning lightweight and efficient animations (designed for Source but works great anywhere!)

Over 60% off!

image

Stacks bundle

Get ALL of our stacks in one incredible bundle deal!

March Special

Get an additional 20% off our Stack bundle!! Add discount code: STH_Mar24 during checkout!

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

There are no specific FAQs for this stack at this time. See our general FAQs below. If you have a particular question about this stack then please get in touch.


General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source