Introducing Gravitate

addonIcon@2

Introducing Gravitate

Advanced, scroll-based animations at your fingertips.

I wanted to take a minute to let you all know I’ve just released a new animation stack for RapidWeaver called Gravitate. This new stack is scroll-based, meaning that unlike normal animation stacks whose animations play out fully once they’re triggered, Gravitate builds the animation on the fly, only animating as you scroll, giving a more natural, interactive effect for your visitors.

Easy to use, powerful results

Set Start and End values for your animations and Gravitate keyframes everything in-between based off of the scrolling of your page.

See it in action!

Gravitate’s animations are something you just have to see for yourself. We’ve built out several pages of examples. From basic animations to get you started, up through combination and advanced animations.

LIVE PREVIEW SITE

Will it work with Foundry?

Of course! While it is not specifically a Foundry only stack, it does work really well with Foundry since you can free-form build your pages from the ground up in Foundry. This allows you to build in some cool animations around your content. I use Foundry in the example pages, as well as the free project file you get with your purchase.

How do I use it?

As usual I’ve got you covered here. Not only do you get an example Foundry project that includes all of the examples on the live preview site, I’ve also put together two in-depth tutorial videos:

BASICS

COMBINATIONS & MORE

You can also checkout all of the stack’s settings on the live preview site, to see descriptions of what the controls within the stack do.

8 Likes

Is this much different to RevealPro and/or can we use Gravity with Foundry?

Yes, Gravitate is definitely different than Reveal Pro. Check out the live preview site to see it at work. Also, give the Basics video a watch where I explain how they’re different.

I cover this in the post above:

Hope that helps.

1 Like

I had a look at this in Firefox and it did not work. Pity as I’m a big fan of foundry and have all packages and stacks

It does work for me in Firefox 80.0.1…

Working fine for me in FireFox as well @pat.

Video: https://d.pr/v/Ph7ScF

1 Like

Gravitate is the best thing to happen to Rapidweaver since Foundry!! Well Done Elixir!!

1 Like

Hi
Are there any reference web sites that you can recommend that use this effect. Tried to do a Google search but only parallax examples would come up. Would like to see how creative designers have used this effect. Thanks!

Apple takes this sort of thing to the next level. Their’s are hand coded and pretty complex, but they do a lot of this. Here’s an example: https://www.apple.com/ipad-pro/

2 Likes

Thanks for the quick reply!
Is there a specific name for this effect?

I don’t know if it has a specific name or not. It is a form of parallax scrolling.

The iPad Air page does some neat stuff with it, too: https://www.apple.com/ipad-air/

As does the iPhone page: https://www.apple.com/iphone-se/

2 Likes

If you get Gravitate I look forward to seeing what you cook up with it. :+1:

2 Likes