Introducing Gravitate

Elixir Stacks
1

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.

9 Likes
2

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

3

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
4

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

5

It does work for me in Firefox 80.0.1…

6

Working fine for me in FireFox as well @pat.

Video: grav-ff.mp4 • Droplr

1 Like
7

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

1 Like
8

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!

9

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: iPad Pro - Apple

2 Likes
10

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

11

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: iPad Air - Apple

As does the iPhone page: iPhone SE - Apple

2 Likes
12

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

2 Likes
13

2 posts were split to a new topic: In search of Foundry tutorials

14

Hi, It looks very interesting, can be used together with F6 or it is only a Foundry solution?

Regards
Aldo

15

Should work with most themes and frameworks. I can’t account for compatibility with every theme or framework though as I can’t and don’t own them all.

16

HI. If it helps, I tested gravitate yesterday with Foundation 6 and it works perfectly. I tested 4 gravitates stacks one inside the other to get different movement effects in different trigger positions. It works. If I have any doubts I will bother you again since the attached project works only with foundry which I don’t use yet.
regards
Aldo

2 Likes