How to Create an Animated Timeline in Framer Without Using Code

Creating an animated timeline can seem like a daunting task, especially if you're not familiar with coding. However, with the right tools and guidance, it can be a straightforward and enjoyable process. In this article, we'll walk you through a step-by-step tutorial on how to create an animated timeline in Framer, a popular tool for interactive design, without writing a single line of code. This tutorial is based on a video tutorial by Digital Kamil, which you can find here.

Getting Started

First, create a new section for your timeline in Framer. Place it in the desktop frame and set it with a fill layout to the vertical stack with a gap of 20 pixels. Adjust the paddings and remove the fill. Now, create a frame for the timeline row and set the section height to fit the content. Set the width of the timeline row to fill and layout to the horizontal stack. Set the gap to 48 pixels and remove the fill.

Creating the Timeline Row

Inside the timeline row, create two inner sections: one for the progress bar and one for the content. Adjust the timeline row height to fit the content. Set the content wrapper width to fill and limit its width to make the text easier to read. Set its layout to the vertical stack with left alignment and change distribute to start. Set the gap, remove the fill, and place the content inside the content wrapper. To make it fully responsive, set all your content width to fill.

Designing the Progress Bar

Next, let's focus on the progress bar. Set its width to 100 pixels and height to fill. Set the vertical layout and change distribute to start. This gap should match the gap set in the timeline section. Inside the progress bar wrapper, type a number and draw another frame for our progress bar. Set its width to 3 pixels, height to fill, and change the color to white with five percent opacity. Inside this frame, draw another one which will be our fill. Set the width to 100 and change the position to 0 pixels from the top and both sides. Now set the height to 50 viewport height. This is because our fill is just a frame that is fixed to the top with 50 viewport height and is hidden behind the progress bar frame.

Animating the Timeline

Now, let's animate the timeline. We will match the number to the progress bar background and create content appear effects. Give each row a scroll section name. Apply an appear effect on the number. Set the trigger to section in view, section to current row name, viewport to the middle, replay to yes, and remove exit animation. To match the progress bar, set opacity to 0.05 and scale to 1. Change the transition to ease. On the content wrapper, apply the same appear effect with the same settings but this time leave opacity at 0 and you can add some wire offset. Apply these effects on the other rows.

Making the Timeline Responsive

To make the timeline responsive, set the timeline roll gap to 20 pixels on tablet and 16 pixels on mobile. Adjust the paddings as well. To make it more condensed, change the number font on mobile to 48 and progress bar wrapper width to 64. If youwant the side-by-side layout, it's pretty easy to achieve. All you need to do is draw a blank frame inside the timeline row and set its width to fill.

Debugging

Finally, it's time for debugging. When we enter the page with the timeline from another page, the progress bar will load already filled. The fill will disappear as soon as we start scrolling, but this is unwanted behavior. To fix this, apply an appear effect on the fill. Set the trigger to section in view, choose the current row, set the viewport to the middle, and replay to no. Set the scale to 1 and to make it smooth, apply a really short easing, for example, 0.1 seconds. Now, on the published website, the timeline will work fine.

‍

Creating an animated timeline in Framer without using code is a straightforward process once you understand the steps involved. The key is to start with a clear layout, add the necessary elements such as the progress bar and content, and then animate these elements. Making the timeline responsive ensures that it looks good on all devices, and debugging is an essential step to ensure that the timeline works as expected.

This tutorial provides a step-by-step guide to creating an animated timeline in Framer, but the possibilities are endless. With Framer, you can create a wide range of interactive designs without needing to write code. So, whether you're a seasoned designer or just starting out, Framer is a tool worth exploring.

Remember, the best way to learn is by doing. So, why not give it a try? Create your own animated timeline in Framer and see what you can achieve. Happy designing!