The Basics

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.

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. This gives a unique, interactive effect to your animations.

You can scrub through these animations by scrolling throughout the page below. If you scrub through an animation and want to see it again, just scroll back up the page.

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.

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

Image
Image
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, followed closely by percentage.

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.

Image

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
Image
Y-Axis
Image
Z-Axis
Image

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

Like everything else we've already looked at you can combine these scale values with other settings to make complex animations.

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.

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

Image

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.

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

Image

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

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

Image
Skew on X & Y-axis

In this example we set our have set a start skew for both the the X- and Y-axis.

Image
Image

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

As we've reiterated throughout these basic examples, and shown in our last example, you can combine many of these settings to make complex animations. We take a look at some of these on the Combinations page of this preview site. While these 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.

Tutorial

In addition to all of these samples we've also created a Learning the Basics tutorial video that goes in depth into what many of the stacks settings do and how to make use of them. We also look at how to setup our trigger points for our animations and make use of Gravitates unique Preview Mode markers for fine tuning those trigger points.

Free Project File

While all of these examples are fun to look at an 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 with your purchase showing all of the animations from this site. In fact it is the exact project file used to create this preview site.

This preview is built in Foundry to make it quick and easy to get a nice modular layout. So there are some requirements for seeing the project file as-is, which we'll list below. 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.