In case the timeline is overlaying other parts of your page do this: 1. Add background colour/image to each section of your website 2. change z index of each section to 1
Quick note anyone wondering why this isn't working for you: the sections above & below need to have a background. Took me an embarrassing amount of time to realise that was the problem. Don't be like me 😅
To anyone who is not able to edit the text is they are copying the Timeline directly from the Library, make sure to set the Z-index to 0 while editing, And then put the Z-index back to -3 once you have finished
Yeah, this is a great tutorial, thank you, Adam. Not sure what I doing wrong, but my main-wrapper cover up the section_timeline, in this case I cant edit the content within section_timeline.
When I create the progress bar div, it doesn't automatically align to the centre like yours. It's positioned to the left of my timeline wrapper container. Any advice on how to sort that?
Awesome stuff! Can you start recording your key presses too? Also, any translations on things like "Schmicker" (sp) and origin (Aussie/Kiwi?) would be great too;)
This is really awesome. I'm wondering if it's possible to create a timeline this way and integrate a collection list, so that when people submit events, they can be put into the timeline in the appropriate place.
This is good for desktop and tablet views but what about the mobile view. How can you show the timeline in mobile view and how can you manage the grid in mobile responsive. If you know about somthing that Please let me know.
Your tutorial is very very interesting... the problem is that the way you construct the section is not easy to understand at all. Could you make please a more understandable video to have more details on the way you build the section? It will be so nice. Thanks
Awesome tutorial! I am very curious how do you adapt it to the mobile screens. I've been trying to adapt it but looks like the only way to do it is playing with margins. Thanks again!
Great vid, exactly what I was looking for. I feel it is only possible if sections have 100%opacity backgrounds. My website being a parallax, it's impossible to hide the "fixed" line used to show timeline advancement. How to turn around this situation? Thanx
After nearly an hour of not following the rules (I have the timeline as an isolated section on my page in the home page, similar to Word Press sites where it is a "how it works" section), I came up with this method guys hope you find it useful! >> Timeline wrapper add interaction, add the interaction to timeline progress instead of using VH use % >> so the interaction is element trigger while scrolling in view play animation (i named mine timeline) 0% when element starts entering 100% when element is fully invisible >> smoothing 85% >> select class "timeline-progress-bar" size = 0% and at 75% scroll action size = 100% ! comment if any questions I'll try to reply if RUclips notifies me :)
it's a great content, thank you so much. I am trying to create a timeline aligned to the start but as there are circles, the timeline doesn't pass from the middle of the circle. What should I do?
This is an amazing tutorial but I can't for the life of me work out the Zindex the moment I change anything. I followed your tutorial to a T but the content inside keeps vanishing. The wrapper is in it's own div. The positioning is set to relavtive. Has anyone had this issue?
Figured it out! I just spend hours trying to figure out the same thing. The background color of all other sections can not be transparent. There may be some other way around this, but all I did was instead of creating sections into a body, I added a div called page wrapper (just like he shows on his clone) dropped all my sections for the entire page into this, and then made the "page wrapper" background color white. This worked for me because my page is all one color.. white lol. I hope that makes sense.
Hey, first of all great tutorial! But ive got one question, it works all just fine, but i cant edit my content inside the TL items. Whats the problem here?
Awesome tutorial! I want to change my grid to 0.75fr, 160px, and 1fr. When I made these changes, how do I change the "timeline_progress" (both lines) to match where the circle is?
This is supberb! Is there a way I can put a lightbox video in the left side of the timeline that I can click and play? I'm not sure how that would be done when timline is -3 z index? Would that be possible?
Awesome tutorial, simply the best out on timelines in webflow. I seem to have an issue though where the timeline_progress-bar element doesn't color the rest of the bar after going over the first timeline_item. Anyone know what this could be caused by?
can you show us how to make a normal time line but horziontal? im trying to make horziontal scroll section and i want to do the same timeline for that section
Hey Relume Family, I really appreciated this video. I have a question if you don't mind. @Relume I cannot edit the text with the timeline why do you think that is and how could we fix this. Thank you once again.
@@sholysholy2239 I noticed that when you add the -3 index to the 'timeline' section, it disbales the ability to edit anything by hovering your mouse over items. I got rid of the -3 index until all the text was edited then put it back
This is super helpful, thank you! My animation doesn't seem to flow as smoothly as yours. Even when I try to clone your project, I get this weird flickering affect on scroll. Any ideas for how to fix that?
Hey Noah, that's a fair assumption, but that won't work because the white bar is using position: fixed, meaning the element is fixed to the viewport and not the grey bar. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant. Glad you liked the tutorial!
Just for your information guys, i have try this method and I was really stressed and having a hard time on the Timeline Center when I wanted to make a Stycky position so this tutorial is not suitable if you are using overflow hidden to wrap website elements. if you guys have an alternative please let me know
In case the timeline is overlaying other parts of your page do this: 1. Add background colour/image to each section of your website 2. change z index of each section to 1
Thanks a lot, I´ve been trying to figre it out for like an hour. You´re awesome.
legend
OMG, Thanks a ton.
dude you're a lifesaver
I did it and now all the sections in my page are all scrambled up 😢 any help please?
Just to add-ons guys:
If you have an overflow hidden in your wrapper the sticky will not implement.
-page-wrapper (overflow-hidden)
-sticky
Thanks!
thank you, subbed
Thank you so much!
Quick note anyone wondering why this isn't working for you: the sections above & below need to have a background. Took me an embarrassing amount of time to realise that was the problem. Don't be like me 😅
ah, thank you. I was almost losing my mind
damn thanks
I was losing my mind until I read this comment. BLESS YOUR SOUL!
And now Relume is a powerful Ai builder ! Congrats !
Being new to Relume and webflow I'm finding these videos very helpful. Thanks for sharing.
Great timeline :) Appreciate you giving the cloneable to play around with, will be implementing. Keep up the great work.
Thanks @soulsaver, we're glad you find this helpful!
To anyone who is not able to edit the text is they are copying the Timeline directly from the Library,
make sure to set the Z-index to 0 while editing,
And then put the Z-index back to -3 once you have finished
Very good video. Nice to see a fellow South African doing great things!
Yeah, this is a great tutorial, thank you, Adam.
Not sure what I doing wrong, but my main-wrapper cover up the section_timeline, in this case I cant edit the content within section_timeline.
put your z index to 0
Thank you Mr. Adam for sharing this video with us
Thanks for the tutorial! Thanks for the cloneable! 😁😁
Thanks so much for this tutorial! I am semi-new to webflow and this was just done beautifully!
Great tutorial! Looking forward to more videos from you!
Thank you so much for this! I've been looking for this tutorial. How do make this responsive?
Thank you for this great and cloneable work ! It is also great on mobile :)
I appreciate you sharing your experience with us. I applaud your efforts, and thank you so much !!!
When I create the progress bar div, it doesn't automatically align to the centre like yours. It's positioned to the left of my timeline wrapper container. Any advice on how to sort that?
Amazing tutorial. Subscribed!
Awesome stuff! Can you start recording your key presses too? Also, any translations on things like "Schmicker" (sp) and origin (Aussie/Kiwi?) would be great too;)
More tutorials please, so good!
How do i stop the progress bar from entering other sections above the timeline? Great video and thank you.
you have to put a backround color or image so the layer is on top hiding it
Really nice explained video, but how can I make it responsive
Very good tutorial skills dude! Thanks! I followed along and used a similar iteration for a project I'm working on
This is really awesome. I'm wondering if it's possible to create a timeline this way and integrate a collection list, so that when people submit events, they can be put into the timeline in the appropriate place.
Thanks for a great tutorial! Gives great insight how to approach animated design in Webflow 🙂
Brilliant work. Thank you, I've just implemented this on my new website. Interesting to read about Relume too. 👌
yes we want moreeee !!!! great tutorial thanks
Thanks, great job! What is the best way to adapt to mobile devices?
Now this is cool! I like this
This is good for desktop and tablet views but what about the mobile view. How can you show the timeline in mobile view and how can you manage the grid in mobile responsive. If you know about somthing that Please let me know.
Thanks so much for this tutorial!😀
Thanks a lot for this great tutorial!
Awesome stuff mate, thanks heaps.
Your tutorial is very very interesting... the problem is that the way you construct the section is not easy to understand at all. Could you make please a more understandable video to have more details on the way you build the section? It will be so nice.
Thanks
Great work, thanks!
Awesome tutorial! I am very curious how do you adapt it to the mobile screens. I've been trying to adapt it but looks like the only way to do it is playing with margins.
Thanks again!
Thank you so much for this tutorial!!! It's awesome!
Great vid, exactly what I was looking for.
I feel it is only possible if sections have 100%opacity backgrounds.
My website being a parallax, it's impossible to hide the "fixed" line used to show timeline advancement.
How to turn around this situation?
Thanx
have the same situation as yours. I set it as a sticky element, and set up a scrolling into view interaction on it. Tweaked it and it works
Thanks a lot for this! Surely helped a lot
Can you make the timeline different shapes besides just a straight line? I want the line to be rugged like an ECG
Great video! My timeline circle for some reason doesnt align to the middle!! Help!
Hey great vid but like a lot of other people I'm having issues with the z index, how do we fix it ?
How is it possible to make it completely responsive, so that the timeline dot isnt jumping from the timeline? Thanks for your help!
I love it!
After nearly an hour of not following the rules (I have the timeline as an isolated section on my page in the home page, similar to Word Press sites where it is a "how it works" section), I came up with this method guys hope you find it useful! >> Timeline wrapper add interaction, add the interaction to timeline progress instead of using VH use % >> so the interaction is element trigger while scrolling in view play animation (i named mine timeline) 0% when element starts entering 100% when element is fully invisible >> smoothing 85% >> select class "timeline-progress-bar" size = 0% and at 75% scroll action size = 100% ! comment if any questions I'll try to reply if RUclips notifies me :)
Well done guys keep going
it's a great content, thank you so much. I am trying to create a timeline aligned to the start but as there are circles, the timeline doesn't pass from the middle of the circle. What should I do?
Great tips and very helful!
This is an amazing tutorial but I can't for the life of me work out the Zindex the moment I change anything. I followed your tutorial to a T but the content inside keeps vanishing. The wrapper is in it's own div. The positioning is set to relavtive. Has anyone had this issue?
Hey jessica, did you find a fix around to this? I get the same issue
Figured it out! I just spend hours trying to figure out the same thing. The background color of all other sections can not be transparent. There may be some other way around this, but all I did was instead of creating sections into a body, I added a div called page wrapper (just like he shows on his clone) dropped all my sections for the entire page into this, and then made the "page wrapper" background color white. This worked for me because my page is all one color.. white lol. I hope that makes sense.
Awesome Work
How can I make it reactive across all devices?
Thank you so much, it was so helpful :) can't wait to see the next tutorial!
Great content !
Hey, first of all great tutorial!
But ive got one question, it works all just fine, but i cant edit my content inside the TL items. Whats the problem here?
Got it, for anyone with the same problem, change z-index of .timeline div to auto
Thanks for all the great content 🙌
Why did you use PX instead of REM when you made the columns?
Awesome tutorial! I want to change my grid to 0.75fr, 160px, and 1fr. When I made these changes, how do I change the "timeline_progress" (both lines) to match where the circle is?
What type of camera and lighting do you use for your videos?
Why, when I copy this clone to another project, the pogress bar is visible in the underneath sections?
Thanks man ❤️
hi! how would this work if my timeline is a cms? could you pls help or direct me to where i can place this inquiry?
Hi! I cant seem to make videos work within the timeline. Does anyone know why this may be happening? thanks
This is supberb! Is there a way I can put a lightbox video in the left side of the timeline that I can click and play? I'm not sure how that would be done when timline is -3 z index? Would that be possible?
Can I add Icon instead of circle dot???
Thank you for this!
Great video!
Can the information you placed here come a cms collection?
Awesome tutorial, simply the best out on timelines in webflow. I seem to have an issue though where the timeline_progress-bar element doesn't color the rest of the bar after going over the first timeline_item. Anyone know what this could be caused by?
Hey, set a display flex, vertical, align center, yustify center and position relative to progress div father element and thats it!
Awesome👍thanks for the great Tutorial! Could you make a Tutorial with horisontal Timeline? 🤭😊
Hey, set a display flex, vertical, align center, yustify center and position relative to progress div father element and thats it!
Is it possible to do the same animation in Figma
Could you show us how to adapt it on the mobile version?
Hey Colin, feel free to email our team at hello@relume.io and we'll be happy to assist you with the mobile version.
can you show us how to make a normal time line but horziontal? im trying to make horziontal scroll section and i want to do the same timeline for that section
Great content! But I can't manage to fix the z index, could you please help?
Really good thank you
Hey, great tutorial! One question, is it possible to make this timeline connected to a collection?
i did exactly same things, but when i try to set date to sticky, nothing happen :/
Someone can find how to solve it ?
solution?
Can I use this in Wordpress?
Hey Relume Family, I really appreciated this video. I have a question if you don't mind. @Relume I cannot edit the text with the timeline why do you think that is and how could we fix this. Thank you once again.
@relume
@@sholysholy2239 I noticed that when you add the -3 index to the 'timeline' section, it disbales the ability to edit anything by hovering your mouse over items. I got rid of the -3 index until all the text was edited then put it back
Hey, nice tutorial, but how to make that on last section the line not to go over the area?:D it just continue to going outside whole section
Hey, set a display flex, vertical, align center, yustify center and position relative to progress div father element and thats it!
why is it requesting me to login to view the section i dont understand why its not giving me the right outcome
This is super helpful, thank you! My animation doesn't seem to flow as smoothly as yours. Even when I try to clone your project, I get this weird flickering affect on scroll. Any ideas for how to fix that?
I guess you can try to increase the smooth parameter to 95%. Try to play with that parameter to achieve the result.
@@GrifanoRide please tell us how
Rather than doing the z-index method, couldn't you just set overflow to hidden on the dark grey bar? Great tutorial!
Hey Noah, that's a fair assumption, but that won't work because the white bar is using position: fixed, meaning the element is fixed to the viewport and not the grey bar. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant. Glad you liked the tutorial!
Amazing!
Does this work on mobile as well?
I’m stuck. How do I make it responsive.
My mobile view is looking funny
amazing!
Just for your information guys, i have try this method and I was really stressed and having a hard time on the Timeline Center when I wanted to make a Stycky position so this tutorial is not suitable if you are using overflow hidden to wrap website elements. if you guys have an alternative please let me know
Great work! And also Adam is really hot. More of him please.
that's osm 💘💘
Wow nice
Bro adding elements faster than the Road Runner 😭 I need a slow motion button
No longer works as of 07/27/2022.
do you know why or can explain?
Спасибо!
You're going too fast and the screen is blurry!
Anyone else having a weird Route Error in Webflow when you try to clone this project?
Wow