- Видео 1
- Просмотров 20 908
Digital Kamil
Добавлен 19 май 2023
How to create timeline in Framer
Preview: timeline-component.framer.website/?via=digital_kamil
Free remix link: framer.com/projects/new?duplicate=A9ysfU49cGlbyK4Ci2uE&via=digital_kamil
Follow me on:
Twitter: digital_kamil
Instagram: digital.kamil
Free remix link: framer.com/projects/new?duplicate=A9ysfU49cGlbyK4Ci2uE&via=digital_kamil
Follow me on:
Twitter: digital_kamil
Instagram: digital.kamil
Просмотров: 20 923
Thank you for this incredibly good tutorial! I’m still a beginner in Framer, and it really helped me create a cool wedding timeline.
Great one, Waiting for more videos to learn.
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
how can I animated this but in Figma?
How i create in react ??? 🤔
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.
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.
como posso usar ?
Really amazing content❤ waiting for more videos
Can't copy and paste...Please help Kamil.
How to copy and paste? Help please
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.
Is it possible to make it on horizontal scroll instead ?
i love to code that's why I'm gonna leave!
So cool, keep making tutorials, please!
How do I do the same in framer motion?
Superb :)
You are a G !
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 :)
how to create timeline in Figma?
It's not possible to make it interactive in Figma
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?
bro throw a gold video on youtube and go away lmao
Don't have any free time or ideas for videos 😅
Superb, thank you! I've been looking for this tutorial.
Could you come out with a video or a reel of the lines moving both horizontally and vertically? 😮
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?
Super, dokładnie czegoś takiego szukałem. Dzięki za ten film!
Brilliant! More Framer content please - liked and subscribed 😀👍🏽
Amazing tutorial. Clean and direct. Hope to see more. Want to subscribe
No i to jest właśnie perfekcyjny tutorial, zwięzły, konkretny i pożyteczny :) Dzięki wielkie
Awesome. Thanks!
Nice man!
Legend.
Just what I needed, thanks!
thx Kamil!
Clean tutorial. Keep up the good work!