moonIMD

Thank you! Yes, it makes sense!

Thank you so much for you help on this! It's looking great and it makes sense! I am just going through your code trying to understand the 'onLeaveBack: () => i || goto(null, 0)' This onLeaveBack is a function when the scroll position moves backward. The 'i' is the index of the section and is it passing that 'i' to the goto()? But it also has this '||' (OR), so I don't quite understand what this line is doing. Thanks again for your help!

1. I will try to use the gsap tween to re-create the animations. 2. To have the 'timeline_container' div animate up and down once it enter or leave the active section, should I not being 'setting style.marginTop' and use gsap tweens (such as gsap.to() gsap.from()) instead. As well, am I correct of animating the 'timeline_container' in the onEnter & onLeaveBack functions? Thanks!

Just want to show some screenshots of what I mean on the resizing issue. Please find 2 screenshots attached. before-resizing.PNG (screenshot #1)- In this screenshot, the markers are in the correct position after-resizing.PNG (screenshot #2)- In this screenshot, I have scrolled down to a couple of years, then resized the browser, then scrolled back up to the first year. The markers are in the wrong position.

Thank you! I did try that way before without the resize event and when resizing the browser, all the start / end markers were in the wrong position. Also when viewing it on mobile phone, the markers are not in the right place (even when reloading the page). What is the issue? Thank you!

HI, I would like to create a vertical animated timeline similar to this http://mtcubacenter.org/about/history/ I have started it, but it's not working properly. Every time I resize it, the start and end markers are not in the right position and sometimes it will duplicate a lot of the start / end markers. As well, when viewing on mobile, the start/ end markers gets all crazy when scrolling up and down. What am I doing wrong? Is there a better way to do this? I want the timeline section to be fixed and the child elements (the years) to animate in/out when scrolling up/down. All the paragraph tags are invisible at start and once each enters the viewport, it becomes visible. This is the codepen url: https://codepen.io/moonIMD/pen/KKQOgBp Thank you!