Combinations

Mix-and-match for Awesome Results

Combining various animation types within Gravitate can give us some truly out of this world animations with very little work required. These combinations are one of the many things that sets Gravitate apart and makes it really powerful.

On this page we've built out several examples where we've combined different aspects of Gravitate to create some more complex animations. We've also take and combined multiple elements in some cases, or even nested Gravitate stacks to create awe inspiring layouts. Use these for inspiration, or just copy and paste them into your project and substitute your own content to get started.

Simple Combos

Let's start with a easier combinations to get warmed up.

In these first few examples we're going to combine positioning and rotation to get some nice, easy effects.

Basic Combo One

In this example we have set our start position to be -300px and set the start rotation to be -360º on the Z-axis. For our end settings we've set the X-axis position to 300px and the Z-axis rotation to 0. This will give us a rolling ball sort of animation, going from the left to the right as we scroll down the page.

We've also set our scrub drift value to 1 second. This allows the animation to keep going for 1 second after we stop scrolling. This gives the animation a more natural feel. We talk about the scrub drift setting in the tutorial video for Gravitate.

Image
Basic Combo Two

In our second combination we have two images within a Columns stack. Each is set to fade in, and float upwards 300px while also rotating 360º around the Y-axis. We've also set the trigger points differently for each of the two images so they appear to animate in a staggered fashion. Like the example above in Combination One we've also given these two animations a 1 second scrub drift for a smoother animation.

Image
Image
Basic Combo Three

In our previous examples we've combined a movement along one axis only. In this combination we'll pair a movement along both the X and Y-axis for our two images. We've set our starting opacity to 0% with our end opacity set to 100% so we get a nice fading in effect. For our left image we've set the X-axis to -300px and the Y-axis to 300px. This starts our image down and to the left. We've inverses these for the image on the right, so it starts from the top and to the right.

Image
Image
Basic Combo Four
Image
Image

In this combination example we've used the absolute positioning mode for both of our images. We've recreated a similar setup to the absolute positioning example on our Basics page, but this time we've paired it with some additional effects as well.

For the image on the left we've set our start and end position for the X-axis to -300px. This keeps it positioned out in the margin of the site design. We've just inverses this for the right-hand image.

Both images have Y-axis positioning as well. The left image is set to -100px for the start position 100px for the end position. This is inverses for the right-hand image.

We've also set the start scale for both images to 0.5, or 50%, so that they seem to zoom in as we scroll.

And to top it all off we've added a 720º rotation to the right hand image on the Z-axis to give is a lot of spin as we scroll down the page.


Advanced Layouts

Next Level Designs

Now that we've looked at the basic uses of the animation controls, as well as how we can combine them to get varying effects, lets now take a look at building advanced layouts for our pages.

In the examples below we've built out several examples using a combination of Gravitate and several different Foundry stacks. These layouts will combine these Foundry stacks as well as several animation properties in Gravitate to create page elements you'll see around the web.

Layout One

In this example we've created a columnized layout containing a few images, headers and text. While this is a pretty standard layout we use everyday in our sites, we can bring a little more attention to the information contained in these columns by adding a pop of interest by simply animating these three images.

Each image scales up while also spinning around the Y-axis as they animate into place. We've also offset the left and right images' start positions toward the center using the X-axis position. And finally we've staggered the animations by using different start and end trigger positions to give an interesting effect.

Image

Header Goes Here

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Image

Header Goes Here

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Image

Header Goes Here

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Layout Two

In this example we've created another columnized layout, with each column containing an image stack. We've used scaling to start the left and right images a bit smaller than the center image and then moved their start position toward the center using X- and Y-axis positioning.

We've also set the center image's z-index to be higher than that of the outer two images so it appears on top of them both.

For the end positioning we've set the scale of all three images to 1.5, or 150% of their original size and used X- and Y-axis positioning to move the outer images out past the bounds of our Container stack. We've also animated a drop shadow on all three images to give them a floating effect. We think this provides a stunning visual for our visitors as they scroll down our page. We've also applied a Custom Property to the outer two images using a CSS filter to blur these images at their start position and then un-blur them at their end position.

NEXT, NEXT LEVEL
You could take this layout even further by using a Video Zoom stack in one or more of the three Gravitate stacks to show off your videos.

Image
Image
Image
Layout Three

Below we've used the Foundry Grid stack to make a nice grid of images. Instead of animating each one of these images with its own Gravitate stack we've used Gravitate's Target Mode to animate all items on the page with a specific CSS class name. Since Stacks v4 allows us to easily add a class name to just about any stack on the page, this lets us reuse an animation over and over again.

In this case we're using it to animate the image in from an opacity of 0% as well as rotate them around the Y-axis. This provides a beautiful animated grid of images as our visitor scrolls down the page.

We cover how to use Target Mode, and how it differs from the normal scrub mode in our Tutorial video.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Layout Four

While this example is slightly similar to Layout Two, it varies in the way the elements are animated into view. For this layout we've created another columnized layout, with each column containing a Display stack. We've used scaling to start the center Display stack a bit larger than the left and right stacks. We've also set the center image's z-index to be higher than that of the outer two images so it appears on top of them both, as well as positioned it upward on the page along the Y-axis.

We've positioned the left and right columns in toward the middle for their starting spots, and animated them outward as the page is scrolled through.

For the end positioning we've set the scale of all three images to 1, or 100% as well as made them fully visible by setting their end opacity to 100%.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Layout Five

In this example we've setup a Foundry Columns stack that goes nearly edge-to-edee in our browser. Inside of it we've included two website screenshots wrapped in their own Gravitate stacks. We've setup our starting positions so that these two large images overlap. As our visitor scrolls down the page the two images separate a big, expanding out to the left and right along the X-axis. While doing this they also float ever so slightly up and down as well to give them a little bit more interest thanks to another set of Gravitate stacks we've wrapped around our first set.

We've also set a larger scrub drift value here so the animations continue a bit after we've stopped scrolling. This gives out images a little bit of a life of their own.

While we've using images here, you could use a different type of stack to get a different effect for your page.

Sometimes an animation doesn't translate well to a small mobile device. How can we adopt our design to fit a mobile device like and iPhone? In this instance below we've used the Foundry Visibility stack to hide our original animation on mobile devices, and instead made a more simplified animation specifically for those smaller screens. If you look at this animation on the Desktop vs iPhone you'll see they're different, and aimed at this specific devices.

Sky's the Limit

While we've included a lot of different examples, from the basic to advanced, there really are almost infinite combinations to be had when creating animations using Gravitate. We encourage you to experiment and try new things. Not every stack will work within Gravitate due to the nature of positioning and animating complex stacks, but most of the basics for web design should work fine within Gravitate.

elixir

THE FORGE. Stay up to date on future versions of Elixir products, as well as important news, updates and more through our newsletter.

Re-Download Purchases

Use your email address to look up your previous orders and retrieve download links.


© 2006-2021 Elixir Graphics

RapidWeaver is a Registered Trademark of
Realmac Software Limited