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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.