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.
@@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.
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?
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.
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 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?
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?
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.
Thank you for this incredibly good tutorial! I’m still a beginner in Framer, and it really helped me create a cool wedding timeline.
No i to jest właśnie perfekcyjny tutorial, zwięzły, konkretny i pożyteczny :) Dzięki wielkie
Super, dokładnie czegoś takiego szukałem. Dzięki za ten film!
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.
thank you sir thats works totally fine
amazing that worked great, thank you so much!!
what the 'Set a scroll section for your Timeline Row' means? and 'Section name to row-1'?
You saved my day buddy! Have a wonderful day
@@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.
Clean tutorial. Keep up the good work!
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?
same problem here. any solution ?
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.
@@peterkonti It worked perfectly. Thank you!!! I would even pin this comment heheheh
Great one, Waiting for more videos to learn.
Superb, thank you! I've been looking for this tutorial.
Really amazing content❤ waiting for more videos
Just what I needed, thanks!
Awesome. Thanks!
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 :)?
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 :)
@@digital_kamil GOT IT TO WORK! Thanks a lot for your comment :)!
@@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?
Brilliant! More Framer content please - liked and subscribed 😀👍🏽
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?
did you find it?
Amazing tutorial. Clean and direct. Hope to see more. Want to subscribe
Could you come out with a video or a reel of the lines moving both horizontally and vertically? 😮
Nice man!
So cool, keep making tutorials, please!
The Scroll button on the Scroll Speed effect doesn't appear. Is this bc of an update? The effect don't work
Yeah it's doesn't appear
Legend.
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.
I replied to you on the Framer community :)
Superb :)
You are a G !
Is it possible to make it on horizontal scroll instead ?
How i create in react ??? 🤔
how can I animated this but in Figma?
thx Kamil!
How do I do the same in framer motion?
Can't copy and paste...Please help Kamil.
How to copy and paste? Help please
como posso usar ?
does not work anymore cuz of the updates
Yeah, unfortunately. You can still copy the effect from the remix link and it’ll work the old way though
@@digital_kamil It doesn't work for me at all. So sad.
how to create timeline in Figma?
It's not possible to make it interactive in Figma
bro throw a gold video on youtube and go away lmao
Don't have any free time or ideas for videos 😅
i love to code that's why I'm gonna leave!