Creating Zapiers interactions

Zapier's website is a gem full of nice micro interactions. Let's dive in and see how we can recreate the little timeline previews solely within Framer, without any code.

Copy Remix link

Preview

Setting up the component

Let's build the foundation of the website and create a component for the entire right side. As you can see, there are already a few variations, but we'll cover that in the next video.

Create the variants

Create each animation state one-by-one, hiding everything on the Primary variant. Then, move through every other variation and set the opacity to 100% for each new component. Be sure to add an empty variant at the end again.

For the first 15 new tasks, I designed two variations. This is necessary to achieve the Zoom effect and move it upward.

Add your interactions

Congrats on completing all the building variants! Now, let's move on to adding interactions. In fact, there is a neat trick to automatically change between variants. Simply set the mode to "Appear", and you'll be able to quickly jump through them.

Setting the timing

Most variants have a timing of 0.8, except for the one just before the JIRA task pops up, which has a timing of 0.1. This tweak helps to ensure a smooth transition in the opening shot.

Finishing up

It's as simple as that! You'll have a beautiful timeline video right on your canvas, without any need for video files or code.

Table of contents

Final result

Setting up the component

Create the variants

Add your interactions

Setting the timing

Finishing up

Sorry

This is only available on Desktop.