How To: Animations (Advanced)

Our Animations options are incredibly easy to use and apply to your Experiences - but when utilized to their fullest potential, can create some very sophisticated looking content! For our full blog that shows off the animation possibilities in Fastr Frontend, please review here:

https://getfastr.com/blog/design-lab-recap-animation-and-effects

This article will cover three specific examples and how you can mimic the movement seen in these examples in your own Experiences. The Animations settings can be found in the following locations within the Fastr Frontend and Creator Studio platforms respectively:

Use Case #1 - Quick Sliding Fit Guide (example link here)

If you open the example link above, you will see that clicking on each of the images creates an effect where all the other images slide in a certain direction across the page. All of that sliding is made possible via the Move Animation and our Multi Scene functionality. 

In this instance, they used six Scenes/Boards in their Experience, and at first glance, all the Scenes look exactly the same inside of the Editor:

But if you dig deeper into each Scene, you will see what is powering the movement in the live Experience.

Clicking on a picture will take you to a specific Scene, so for example - if you open that link then click on "Flare", that will take you to Scene 3 (and if you click on "Flare" a second time, it takes you back to Scene 1, which is how the images get "reset" to their default positioning). Click here if you need a refresher on how to build Multi-Scene Experiences.

Within each Scene, all the images are assigned a Move Animation, which is what makes them slide off of the page when you get to that specific Scene. Continuing with this example, if we look at the Animation settings applied to the images on Scene 3:

You can see that the images are set to Move 260 pixels to the right once this Scene loads, and that is what creates the movement you are seeing! Telling all the images to Move the same amount of pixels at the same delay/timing creates the effect you see in this Fit Guide example. To break this down even further, this is the exact settings that were applied to the images in this example:

• Board/Scene 1: All images are static - 0 animation
• Board/Scene 2: Product 1 is stationary with no animation while all the others (product 2, 3, 4, & 5) 'Move' to the right 260px
• Board/Scene 3: Products 1 & 2 are stationary with no animation while all the others (products 3, 4, & 5) 'Move' to the right 260px
• Board/Scene 4: Products 1, 2, & 3 are stationary with no animation while all the others (products 4, & 5) 'Move' to the right 260px
• Board/Scene 5: Products 1, 2, & 3 'Move' to the left 260px while products 4 & 5 remain stationary.
• Board/Scene 6: Products 1, 2, 3, & 4 'Move' to the left 260px while product 5 remains stationary.

Use Case #2 - Slow Moving Imagery (example link here)

In this second example just above here, you can see the furniture imagery that slowly slides into place. This is also done using a combination of the Move Animation and Multi-Scene functionality.

Every change of imagery just indicates a Scene change - so nothing particularly advanced is happening there.

Next, each image has the Move Animation applied to it and is telling the image to move in a certain direction. Along with that, they have increased the "Time" value on each Move Animation, which creates the effect you are seeing where each image slowly slides across the page (note: the higher your "Time" value, the slower the movement will be).

On the first scene of this example, you have two images moving slowly in different directions. That was done using the following settings:

• The image on the left - Animation: Move, Horizontal Move: 0 px, Vertical Move: Up 50 px, Delay: 0, Time: 7 seconds
• The image on the right- Animation: Move, Horizontal Move: Right 50 px, Vertical Move: 0 px, Delay: 0, Time: 7 seconds

Then similar settings/logic are applied to the other Scenes in this Experience accordingly.

Use Case #3 - Image Slide In and Stacking (example link here)

In this final example, you can see a series of images quickly slide into view, stacking from left to right - without the need of a click to trigger that like in Use Case #1.

This was made possible by applying the Slide In Animation to each individual image. The settings on those Animations are exactly the same for each image aside from the Delay value:

And that difference in the Delay on each image is what creates the appearance of them coming in one-by-one. To be more specific, these are the settings on each of the three images:

• Image One - Animation: Slide In, Direction: From Left, Easing: Linear, Delay: .5 second, Time: 1.25 seconds
• Image Two - Animation: Slide In, Direction: From Left, Easing: Linear, Delay: .75 second, Time: 1.25 seconds
• Image Three - Animation: Slide In, Direction: From Left, Easing: Linear, Delay: 1 second, Time: 1.25 seconds

Please contact support@getfastr.com with any further questions on this!