Gravitate
Gravitate

Gravitate allows you to create advanced, scroll based animations for your site. Set start and end values for your animation and Gravitate keyframes everything in-between based off of the scrolling of your site.

Overview

gravitate

Positioning

Gravitate allows you to set a start and end position for your animated element. It then takes over and keyframes everything in between to create a super smooth animation.

gravitate

Rotate, Scale & More

In addition to positioning you are able to set start and end rotation, scale, skew, opacity and more. This allows you to build complex animations with just a few clicks.

gravitate

Triggers

Create separate triggers for each and every animation, or use Target mode to trigger many animations at once. Choose where and how your animations kick off and complete.

gravitate

Preview Mode Markers

We also offer unique Preview Mode markers what help you visualize where your things will begin and end, allowing you to quickly and easily construct your animations.

gravitate

Measurements

Gravitate allows you to choose from a variety of different units for measuring the positioning of your animated items in both the X- and Y-axis. This allows you much greater control.

gravitate

Repeat

Have your animations repeat multiple times within their trigger area, or have them play just once and not again. Gravitate is flexible, allowing you to build a variety of animations.

gravitate

Positioning Mode

Use normal, inline positioning for you elements, allowing them to display with the rest of your content, or opt for absolute positioning where they can glide over top of your other page elements.

gravitate

Pin it

Pin mode allows you to stick you animating item in place for the duration of its animation. This can often be paired with other animations to create unique and complex layouts.

gravitate

Custom Properties

This advanced feature allows you to include custom CSS filters on your animated elements. We cover more about this advanced feature in the Gravitate tutorial video above.

gravitate

Target Mode

Provide a CSS class name here and have one Gravitate stack animate a whole host of items on your page in the same way. This advanced feature is talked about more in-depth in the video tutorial for Gravitate.

gravitate

Free Project File

Included with your purchase is a free project file that shows of many uses, both basic and complex. This project file uses Foundry, but the samples themselves can be used in any theme or framework in RapidWeaver.

Settings

We outline all of Gravitate's settings in detail on the Settings page of the Gravitate Preview site.

In addition to all of the settings details we also offer two in-depth tutorial videos that walk you through the basics and so much more to get you started building amazing animations.

Known Bug

In Safari version 13.1.1 (Build: 15609.2.9.1.2) if you have an animation that would cause horizontal scroll bars to appear and you scroll sideways with a mouse scroll wheel or track pad, the vertical scrolling of the page will lock up. This seems to be an isolated bug in Safari v13.1.1 however.

Compatibility

Gravitate will not work on a page with Reveal Pro from Foundry. The two stacks are incompatible. Using them together will cause a javascript error.

Basics

Basics

Combinations & More

Combinations & More