Powerful, yet easy to use
Gravitate makes building both simple and complex animations fun, and easy. Provide some start and end settings and Gravitate handles the rest, creating smooth scroll-based animations that can really bring your pages to life.
Quick look
Before we check out the sample animations, let's have a look at some of the highlights of what Gravitate can do for us when animating elements on our pages.
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.
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.
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.
Preview 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.
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.
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.
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.
Customize
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.
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.
The Basics
Out of this world
Below we'll demonstrate some basic animations that you can create that are linked to the scrolling of the page. As you scroll down the page, not only will animations be triggered, but Gravitate uses the location of the scrolling page to construct each keyframe of the animation. This gives a unique, interactive effect to your animations.
You can scrub through these animations by scrolling up and down the page. If you scrub through an animation and want to see it again, just scroll back upwards.
Positioning
The most basic, and most used settings within Gravitate are its positioning controls. These allow you to determine where your animation will begin and end using both positive and negative values for your X- and Y-axis. Like many of the settings in Gravitate, these positioning values can be combined with other start and end settings as well.
X-Axis
Below we're animating two images in from the left and right. We've started them off at 0% Opacity with the left image's starting X-axis position at -300px and the right image's starting position at 300px. As you scroll down the page you'll notice the further you scroll the more the images move in toward the middle of the page.
Y-Axis
Below we're animating two images in from the top and bottom. We've started them off at 0% Opacity with the left image's starting Y-axis position at -300px and the right image's starting position at 300px. As you scroll down the page you'll notice the further you scroll the more the images move in toward their end location.
Positioning Units
When setting the start and end position of your animation you can choose which units of measurement you'd like to use. We offer several different types, with the default, and most used option being pixels. In addition to pixels you can also choose to use percentage, EM, view height (VH), view width (VW), view max (VMAX) and view minimum (VMIN).
These various different units can help you to achieve different layouts and animations for your pages. As mentioned, pixels will be the most commonly used of the units.
Start & End Position
In the above examples we've provided just start values and left our end values set to 0 for the X- and Y-axis positioning. Below we have an example when we've set both a start and an end position for our X-axis. We've set the start X-axis position to 100% and the end position to -100% taking into account that the image's natural location of 0 is in the center of the page, as that is where we're placed it.
As you scroll you'll notice the image move from the far right of the page to the far left.
Rotation
Gravitate allows you to set a few different rotations for both your start and end values. You can rotate your elements around the X, Y and Z-axis, and they can all be combined together as well to make complex animations. Below we've set a start rotation of 360º around all three axises. The Z-axis rotation is likely to be the most common rotation you'll use.
Much like the positioning values you can use negative numbers for your rotation values, as well as you can combine these rotations with other settings in the Gravitate stack.
X-Axis
Y-Axis
Z-Axis
Scale
Scaling an element up or down is super simple when using Gravitate. The scale settings allow you to scale an object uniformly, which is most common, or you can choose to scale elements in the X- and Y-axis independently to give a stretched our or squashed look. Again, you can use both positive and negative numbers with these scale values to make things larger (positive numbers) or smaller (negative numbers).
Uniform
In this example we set our start scale uniformly. We scaled the image down to 50% of its natural size (0.5x) and its end scale is set to 100% (or 1.0x). This gives us a zooming in effect.
Non-Uniform
In this example we set our start scale independently. On the X-axis we scaled the image up to 150% of its natural size (1.5x) and its end scale is set to 100% (or 1.0x). This gives us a stretched out effect.
Opacity
A popular thing to incorporate into scroll-based animations is the use of opacity changes. Gravitate makes this really easy to do, giving you a start and end opacity slider so we can have Gravitate keyframe these opacity changes, letting us have make our content fade in or fade out, or even somewhere in-between.
Fade In
In this example we set our start our opacity slider at 0% and fade it in to 100% as the page is scrolled through.
Fade Out
In this example we set our start our opacity slider to 100% and fade it out to 0% as the page is scrolled.
Skew
Gravitate also allows us to skew our content in both the X- and Y-axis independently. This can give us a distorted look, which also can covey movement in some instances. This is a less popular adjustment, but combined with other settings this could add something to your animation. As with many settings in Gravitate, you can use both positive and negative values for your skew angles.
Skew on X-axis
In this example we set our have our start skew for the X-axis set to 30º and the end skew set to 0º.
Skew on Y-axis
In this example we set our have our start skew for the Y-axis at -30º and the end skew set to 0º.
Skew on X & Y-axis
In this example we set our have set a start skew for both the the X- and Y-axis.
Position Mode
All of the examples so far have used the normal positioning setting. This means the object starts where it would in the normal, or natural flow of the page. Gravitate also includes an absolute positioning mode which will allow content within Gravitate to reside on top of other content on our page, or at the very least not leave a gap in the natural flow of the page if we position something outside of our main content.
In this example we've used absolute position mode to place an image to the right of our content. We've set an X-axis start and end position of 300px, keeping it outside of the bounds of our text. We've also set a start and end position in the Y-axis: 50px for the start and -50px for the end. This gives the image the appearance of floating up the page slightly as we scroll down the page. A sort of parallax animation for our image.
Combinations & More
If you think these are cool, wait until you see our Combinations and Advanced animations
As we've reiterated throughout these basic examples, you can combine multiple settings to make complex animations.
While the transformation settings for position, scale opacity, etc. are the basis for everything that Gravitate can do, we also have several other settings within the stack to take your animations further, such as pinning animations, triggering multiple animations on a page with one Gravitate stack in target mode and more. We look at some of these settings on the Advanced Layouts page.
Documentation
What does this setting do?
In addition to the tutorial walk through video above we also offer detailed documentation for each setting within this stack to help you in building your site and making the decision to purchase this stack.
You can find the full documentation and tutorials for Gravitate, as well as all of our other products in the Elixir Support Hub.
Free Download
Learn by example
While all of these examples are fun to look at, and tutorials are always helpful to watch, it is often easier for some people to get their hands on a project file a play around with pre-existing stacks on the page.
For this reason we've included a free project file showing all of the animations from this site. This preview is built in Foundry to make it quick and easy to get a nice modular layout. That said, if you want to just transplant some of these animations into a project file of your own, that is easily done by just copying and pasting them into your project. We just ask that you don't use the existing images in your own sites.
You can download the free project file below, or you can also find it included in the DMG file that you received when you purchased Gravitate.
Requirements
What will you need in order to use Graviate for your RapidWeaver website?
Gravitate uses some of the latest web technologies to bring about these amazing, scroll-based animations. Let's take a look at what you'll need to use Gravitate as well as what browsers support the animations Gravitate creates.
What you need
We use the latest Stacks API for Gravitate to help facilitate the functionality of the stack. You'll need the following tools to make use of Gravitate for your site:
- RapidWeaver v8 or newer
- Stacks v4 or newer
Browser support
This stack is designed with modern browsers in mind to give your visitors the best experience possible. Gravitate's animations will work in the most recent versions of these browsers:
- Safari
- Firefox
- Chrome
- Edge
Optional
If you wish to make use of the example project file as-is, you will optionally need Foundry v2 as well.
Conflict
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.
Known Browser 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.