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.
This page outlines the settings included in the Gravitate stack and talks about what they do, and how they affect the stack's functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the stack, as well as gives you an idea what the stack can do. For examples of the stack in action, please visit the product page.
Let's take a look at each of the settings in the stack and talk about what each of them does. In addition, don't forget to check out the tutorial videos for Gravitate as we walk through many of the included features of this powerful stack.
What sets Gravitate apart from most animation stacks is that its keyframes are keyed off of the actual scrolling of the page. As the page scrolls the values of the settings we configure in the stack are adjusted based off of the page's scrolling location. This is called Scrubbing -- Scrub Mode is primarily what most people will use this stack for.
While this unique feature is what 99% of users will make use of, we've also included and autoplay feature. The auto play feature works more like a normal animation stack does. Once you scroll to the trigger location the animation automatically begins and plays all the way through, independent of your scroll position.
We've added the auto play mode because other animation stacks may conflict with Gravitate. This means you can mix and match to two modes together on a page without worry.
This identification label is used solely for Preview Mode in RapidWeaver. If you have many different Gravitate stacks on a page, this ID helps when using the Markers mode.
This determines the amount of time that an animation continues to play after you've stopped scrolling the page. This is only used in Scrub more and not in auto play mode. The higher the value, the longer the animation will continue top layout after you've stopped scrolling. This setting can help give your animations a little bit of a life of their own. We recommend somewhere between 0.5 sec and 1.5 sec for most animations.
The Start and End sections of the settings panel are identical in their settings. They each contain position, scale, opacity, rotation, etc settings for defining your animation.
Each setting works the same for these two sections, they just affect the state of the animation at different times in the animation. Below I will detail all of the Start settings, but know that the End settings work the same, but instead of determining the Start position or Start scale for instance, the End settings will instead determine the animation End position or End scale.
Allows you to set the Start Opacity for your animation. This is how translucent the item(s) in your Gravitate stack will appear.
Here you can set the Start Scale of your animation. A Scale of 1 equals 100%. If you wanted your object to Start at 50% you could set this value to 0.5 for example. An element that has a Start Scale of 0.5 and an End Scale of 1 would animate from 50% in size to 100% in scale over the course of the animation.
Most of the time you'll want a uniform Scale value, meaning that the Scale of the object is the same along the X- and Y-axis. You can however set an independent scale value for both of these axises by clicking the small (+) button to give you separate X- and Y-Axis Scale settings.
After Opacity, this is likely the most used setting for creating animations. The positioning values allow us to animate from one location to another along the X- or Y-axis (or both). A value of zero positions the element in its natural location. In other words the location the image, text, etc would have been when you put it on the page for normal usage.
We can use both positive and negative values in the X and Y fields. A positive value in the X field would move an item to the right, while a negative value would move it to the left. A positive value in the Y field moves our item down the page, while a negative value moves it upwards.
X- AND Y-AXIS UNITS
We can measure the movement, or position values in different units. The default, and most common unit used is pixels (px). This allows us to set very specific distances that will always be the same. But we can also use a variety of other unit types for positioning our animated items, and we can set each axis' units independently.
We can choose from the following unit types:
Each of these units have their positives and negatives when it comes to design. You'll want to experiment with them to see which ones might fit specific situations.
We can rotate the item(s) in our animations around three different axises -- the X, Y and Z. The most commonly used rotation axis is likely to be the Z-axis, but all have their place. The rotation value is measured in degrees. We can use positive or negative values here as well.
Think of the skew values as a way to elongate, or slant an item. We can choose to Skew our animated item(s) along the X- or Y-axis. The Skew value, like Rotation, is measured in degrees.
Triggers let us configure when and where our animations will begin and end. Since we can do this independently for each animation on our page we have a lot of control over how our animations play out.
These two settings allow us to choose the Start and End positions on our browser window. We set these values in percentages. We'll think of our page going from 0% at the very top of the visible browser window to 100% at the bottom of the visible browser window. The default settings are 80% for the Start position and 20% for the End.
We can get more advanced even and use numbers higher than 100% and lower than 0% for our Start and End locations as well, but these are for more rare circumstances.
START & END TRIGGER
Each animation has two triggers attached to it -- A Start Trigger and an End Trigger. By default we set the Start and End Triggers to the Top of the animated item. This is generally the easiest to picture and understand. This means that when the Start Trigger on our animation item crosses the Start Location, our animation can begin. When our End Trigger passes the End Location the animation will complete. Gravitate automatically keyframes everything else between these two locations.
You can set the Start and End Triggers to be at the Top or Bottom for each independently of one another.
This is a more advanced feature of Gravitate. It allows you to choose whether you'll have the animation's triggers assigned to itself, or trigger off another item on the page. 99% of the time you'll be using the Self trigger.
If you opt for the Custom Trigger feature you'll be given a field for a CSS Class name. Here you'll provide the Class name for the item on the page that you wish to have trigger this animation.
Easing allows us to customize the feel of the animation. It can be more readily seen when using Auto Play, but is also applied to Scrub mode animations as well. We have several Easing types to choose from. For Scrub mode we find that "Slowest Ease Out" usually works the best.
EASE IN / OUT
Allows you to choose which end of the animation the easing will be geared towards. By default the easing is set to Out, meaning the easing will build toward the end of the animation. You can also choose for In, which reverses the easing toward the start of the animation, or In & Out which applies it to both ends of the animation.
ENABLE DROP SHADOW
When turned on this feature adds Drop Shadow settings to both the Start and End sections of the settings in this stack. This allows us to animate a drop shadow for the stack as a whole. We can set Start Drop Shadow settings as well as End Drop Shadow settings for Gravitate to animate between.
ENABLE ROUNDED CORNERS
When turned on this feature adds Rounded Corners settings to both the Start and End sections of the settings in this stack. This allows us to animate a the roundness of the stack's corners as a whole. We can set Rounded Corner values for Gravitate to animate between.
Normally an animation will animate from Start to End as we scroll down the page, and then reverse itself, going from End to Start as we scroll back up the page. If Trigger Once is enabled the animation will disable itself after it has played through completely once. After that it will not animated again unless the page is reloaded.
By default our animations play through one time between Start and End. Increasing the Repeat value will cause the animation to play more than once between the Start and End positions.
Allows you opt for Normal or Absolute positioning. Normal positioning treats the contents of your Gravitate stack like normal content on your page, displaying it inline with everything else. This is the setting you'll use most times. Absolute positioning allows you to have elements that sit on top of your other content. When set to Absolute mode you're also able to choose whether to start the element to the left or right side of its parent. The Absolute positioning mode is definitely a more advanced feature.
This setting allows us to layer our animations on top of one another and other elements on the page. The higher the number, the higher in the stack that element will appear.
Enabling this feature pins your animated item in place when you Start Trigger reaches the Start Location. The Pinned animation will remain in that location until the completion of the animation.
When enabled this feature adds spacing equal to the spacing needed for the page to scroll for the entirely of the animation to complete before the animation becomes un-pinned. If this feature is disabled, content below your pinned animation may scroll behind your animation.
This feature snaps pinned content into position. You can adjust how granular that snapping action is through the Snap Increment slider.
When enabled a Custom Properties field will be added to both the Start and End sections of the stack. This allows you to add your own custom CSS properties to be animated. While this is quite powerful, it is also pretty advanced. If you use just one custom property you do not need a comma after the property. If you use multiples you need a comma between them. Some custom properties you might try our would be:
Note that if you put a custom property in the Start field you must also have an associated custom property in the End field as well, and vice versa. This in non-optional when using Custom Properties.
This mode allows you to apply one Gravitate stack to many different items throughout your page using a simple CSS Class name. Our tutorial video details how this works, and is much easier to explain and understand via a video tutorial.
This unique feature helps you to better refine your animations before publishing via Preview Mode in RapidWeaver. The Markers function adds some simulated positioning for where your Start and End Locations and Start and End triggers exist on the page. This helps in planning where your animations will begin and end, and how long you'd like them to take to complete.