How to create timeline in Framer

Рет қаралды 21,651

Күн бұрын

Preview: timeline-compo...
Free remix link: framer.com/pro...
Follow me on:
Twitter: / digital_kamil
Instagram: / digital.kamil

Пікірлер: 54

@roger-tedoldi 18 күн бұрын

Thank you for this incredibly good tutorial! I’m still a beginner in Framer, and it really helped me create a cool wedding timeline.

@dar3595 Жыл бұрын

No i to jest właśnie perfekcyjny tutorial, zwięzły, konkretny i pożyteczny :) Dzięki wielkie

@peterkonti 3 ай бұрын

For the new people trying to this now, there's an issue with scroll speed and you need to use scroll transform instead, here's how to do it: 1. Set a scroll section for your Timeline Row (Example: row-1) 2. Make the Bar and the Bar fill be the same fixed hight, in this case around 250px (depends on design) 3. Give the Bar Fill a Scroll Transform animation. 3a. Set it to section in view, Viewport to Middle, Section name to row-1 3b. Adjust the "From" Effect to be: Opacity:1, Scale:1, Offset Y: -250px (or your bar hight) 4. Duplicate your Timeline Row a few times (Framer will do the rest) 5. Enjoy your timeline effect and continue enjoying Framer. Cheers.

@Khan_mudassir-5g 3 ай бұрын

thank you sir thats works totally fine

@Querisau 3 ай бұрын

amazing that worked great, thank you so much!!

@dominikalew123 2 ай бұрын

what the 'Set a scroll section for your Timeline Row' means? and 'Section name to row-1'?

@Jorge-Herna 2 ай бұрын

You saved my day buddy! Have a wonderful day

@coastalthemes 27 күн бұрын

@@dominikalew123 Select the row, and on the right hand panel, scroll down to the 'scroll section' tab and assign a tag/name to the section. This is a way to identify the row so that when you create the scroll transformation it knows to animate when it hits that section which you named.

@tymonmarkowski Жыл бұрын

Super, dokładnie czegoś takiego szukałem. Dzięki za ten film!

@Khaled-m7y Ай бұрын

Great one, Waiting for more videos to learn.

@hanspeter9007 Жыл бұрын

Clean tutorial. Keep up the good work!

@jarosoho2049 Жыл бұрын

Brilliant! More Framer content please - liked and subscribed 😀👍🏽

@neuniad7316 Жыл бұрын

Superb, thank you! I've been looking for this tutorial.

@aashutoast 3 ай бұрын

I followed every step until 4:00, but unfortunately, I did not get the option to set the position to scroll after applying the speed scroll effect. Would you be able to help me with this?

@barankuzoluk1413 3 ай бұрын

same problem here. any solution ?

@peterkonti 3 ай бұрын

Yeah, this changed in Framer so here's a different solution that will work always: 1. Set a scroll section for your Timeline Row (Example: row-1) 2. Make the Bar and the Bar fill be the same fixed hight, in this case around 250px (depends on design) 3. Give the Bar Fill a Scroll Transform animation. 3a. Set it to section in view, Viewport to Middle, Section name to row-1 3b. Adjust the "From" Effect to be: Opacity:1, Scale:1, Offset Y: -250px (or your bar hight) 4. Duplicate your Timeline Row a few times (Framer will do the rest) 5. Enjoy your timeline effect and continue enjoying Framer. Cheers.

@meajuda6067 7 күн бұрын

@@peterkonti It worked perfectly. Thank you!!! I would even pin this comment heheheh

@craftbyfatima2933 5 ай бұрын

Really amazing content❤ waiting for more videos

@thismalaysiandudeUSA Жыл бұрын

Hi Digital Kamil, at 3:57, I don't have the effects tab on the side panel like yours does. I tried redoing it, finding it but to no avail. Do you know why my effects tab does not show up like yours?

@kizumsc 6 ай бұрын

did you find it?

@THENEONGRID Жыл бұрын

Awesome. Thanks!

@mateusrila Жыл бұрын

Just what I needed, thanks!

@hisanzee3052 Жыл бұрын

Amazing tutorial. Clean and direct. Hope to see more. Want to subscribe

@Samuel_Nvota Жыл бұрын

Amazing! Is there any way I can merge this component with my existing website? Copy pasting doesn't seem to work? Is it OK for me to do so, please :)?

@digital_kamil Жыл бұрын

Copy paste should work :) You can remix the whole project (link in the description), then head up to the variant you'd like to use, copy "timeline wrapper" section from the layers panel (desktop breakpoint) and paste inside your project. Once you paste it, you can customize all the fonts and colors :)

@Samuel_Nvota Жыл бұрын

@@digital_kamil GOT IT TO WORK! Thanks a lot for your comment :)!

@OceanGuha 7 ай бұрын

@@Samuel_Nvota hey, i did copy paste it and when i view it, it works perfectly fine. But after publishing it and checking it on my website, i am not getting the purple bar. (its their in framer view). Any help?

@rosar.4293 Жыл бұрын

Could you come out with a video or a reel of the lines moving both horizontally and vertically? 😮

@marikochan_ 7 ай бұрын

Is it possible to make it on horizontal scroll instead ?

@Anna-b1z5n 9 ай бұрын

So cool, keep making tutorials, please!

@marciocleiton.delima Ай бұрын

The Scroll button on the Scroll Speed effect doesn't appear. Is this bc of an update? The effect don't work

@wirelessmillion 18 күн бұрын

Yeah it's doesn't appear

@drpages Жыл бұрын

Hello, thank you so much for the tutorial. After creating it, I'm having issues with mobile responsiveness... there's a white strip appearing only in the timeline section, and I've checked everything but can't find anything odd that might be causing the issue. Have you encountered something like this before? Help.

@digital_kamil Жыл бұрын

I replied to you on the Framer community :)