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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
In this example we set our start our opacity slider at 0% and fade it in to 100% as the page is scrolled through.
In this example we set our start our opacity slider to 100% and fade it out to 0% as the page is scrolled.
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.
In this example we set our have our start skew for the X-axis set to 30º and the end skew set to 0º.
In this example we set our have our start skew for the Y-axis at -30º and the end skew set to 0º.
In this example we set our have set a start skew for both the the X- and Y-axis.
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.
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.
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.
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:
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:
If you wish to make use of the example project file as-is, you will optionally need Foundry v2 as well.
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.