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.

Tutorial

In addition to all of these Combination samples we've also created a tutorial video that goes in depth into how to combine the basics into more complex animations. In this tutorial we also touch on target mode, pin mode and custom properties.

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.