🥳 Enjoy 3 months of Framer for free!
#1 - What are we building?
Let's begin with our end goal in mind. Visit zapier.com to see their website, full of delightful interactions. But for simplicity, here's a video illustrating what we're building.
#2 - Setting up your 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.
#3 - Create the different states
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.
#4 - 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.
#5 -Set timing correctly
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.
#6 -There it is
6. 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.
👋 I hope you've enjoyed today's drop.