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