Racind

@rodrigo Hey! No issue on the response time. I'm just happy that I can get help from someone. Sometimes it's hard to find help with js libraries. I didn't consider doing it that way since the repeater that builds the sections is based on rows and doing it that way would add quite a bit more html. However, If that is what is needed to make it work then a little more html isn't going to cause any issues. I will test it out and see if I can get that working! I'll keep you updated and thanks again for taking time to help me out!

@Rodrigo Hey, Sorry for the delayed response. I had some other things on this site to take care of and I had some ideas I wanted to try out with this one before I made a video. I updated the codepen here to include the changes I made, but for a brief synopsis: I moved the timeline holding the tweens inside the repeater in order to split the instances. Then I just added those into the master timeline. I was hoping that instead of trying to update them I could just kill() them on resize then have the function create and add new ones into the master timeline anytime it needed to re-build itself. I have that all set up for some reason it doesn't seem to be working how I thought it would. Additionally, In order to avoid having the trigger ' green line' move to the left position on mobile, I just added a mobile version that is hidden on desktop and called a separate scrollTrigger event for that one. It works on refresh but not on resize... So.. my current list of issues: 1 - on resize, the marker in the standalone scrollTrigger call just kinda disappears on resize. Sometimes it shows a bit sometimes it doesn't. I'm thinking this has something to do with the 'pinReparent' property, which I have to have because the markers parent container has a transform on it to center it completely. 2: the tweens/instanced timelines are not updating/being deleted properly on resize... In addition to the codePen being updated, here is a link to where I have it on a live page. It works and looks great on initial load, but on any re-size event without reload, it is pretty bad.

@Rodrigo Thanks for your help! I am still having a couple issues with it though and I can't seem to get the issues to duplicate on the codepen. Is there any possible way to set up a call with someone or is a loom video okay to show more detail about it and hopefully find a solution?

I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning ?. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks!