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.
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?
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?
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.
No i to jest właśnie perfekcyjny tutorial, zwięzły, konkretny i pożyteczny :) Dzięki wielkie
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.
Super, dokładnie czegoś takiego szukałem. Dzięki za ten film!
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.
Great one, Waiting for more videos to learn.
Clean tutorial. Keep up the good work!
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?
Superb, thank you! I've been looking for this tutorial.
The Scroll button on the Scroll Speed effect doesn't appear. Is this bc of an update? The effect don't work
Could you come out with a video or a reel of the lines moving both horizontally and vertically? 😮
Brilliant! More Framer content please - liked and subscribed 😀👍🏽
Really amazing content❤ waiting for more videos
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?
Amazing tutorial. Clean and direct. Hope to see more. Want to subscribe
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 :)
Is it possible to make it on horizontal scroll instead ?
Just what I needed, thanks!
How i create in react ??? 🤔
how can I animated this but in Figma?
So cool, keep making tutorials, please!
Awesome. Thanks!
How do I do the same in framer motion?
como posso usar ?
How to copy and paste? Help please
Can't copy and paste...Please help Kamil.
Superb :)
Nice man!
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.
thx Kamil!
how to create timeline in Figma?
It's not possible to make it interactive in Figma
You are a G !
Legend.
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!