scrolltrigger Need help with resetting my scrolltrigger and timeline on re-size

[Racind]

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!

See the Pen vYjdzyv by k-ord-dev (@k-ord-dev) on CodePen

[Rodrigo]

Hi @Racind and welcome to the GreenSock forums!

 

I believe the best approach for the setup you have in your app should be Match Media. It should liberate your code for re-creating the timeline instance over and over again and checking the width argument on every resize event, Match Media does it for you.

 

Another option if Match Media doesn't help would be to revert the timeline:

https://greensock.com/docs/v3/GSAP/Timeline/revert()

 

Actually this seems to be working:

const controller = {
  timeline: document.querySelector('.timeline'),
  marker: document.querySelector('.tl-line__marker'),
  bulletArr: document.querySelectorAll('.tl-section__bullet'),
  sections: document.querySelectorAll('.tl-section'),
  bulletPos: [],
  linePos: {},
  tl: null,
  
  buildTimeLine(width) {
    let tl = gsap.timeline({scrollTrigger: { /*...*/ }})
    for(let i = 0; i < this.sections.length; i++) {/*...*/}
    
    this.tl = tl
  },
  resetTimeLine() {
    this.tl && this.tl.revert()
  },
}

const observer = new ResizeObserver(model.debounce(400, entries => {
  let newWidth = model.getBodyWidth()
  controller.resetTimeLine()
  controller.init(newWidth)
}))

Let us know how this works out.

 

Happy Tweening!

[Racind]

@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?  

[Rodrigo]

Yeah if you could share a video showing not just the code but also a screen of  devtools when passing the breakpoints to see what happens and the generated DOM structure, it could help.

 

Just like in the samples, please try to show just the part that is actually involved in the issues you're having.

 

Happy Tweeting!

[Racind]

@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]

Hi  @Racind,

 

Sorry for the late response.

 

I'm looking as much as I can into your example and trying to figure it out. I haven't dealt with MVC code organization in years so is coming back slower than desired.

 

The one thing that I found is that if you remove the position: absolute from the line container element, the ScrollTrigger instance works perfectly when passing the breakpoint without the need to kill or revert any timeline.

.tl-line-container {
/*   position: absolute; */
  top: 0;
  left: 0;
  height: 0;
  width: auto;
  z-index: 1;
}

@media (min-width: 768px) {
  .tl-line-container {
/*     position: absolute; */
    top: 0;
    left: 50%;
    height: 0;
    width: auto;
    transform: translateX(-50%);
    z-index: 1;
  }
}

Even with the transform applied to the element it works, even though is the parent of the marker which is being reparented to the body element. For some reason that is causing issues. I know that this might come as a major problem since your entire setup is somehow predicated on the position of that element. To that point, using flexbox on the main wrapper in order to create a two/three column layout is out of the question? I would try that since it shouldn't be too complicated.

 

Another option is to check the animation without ScrollTrigger. That is, create the animation of the marker going through the line without ScrollTrigger and play/reverse it with a button and scroll along to see how it works. Then resize the window and see if it works as expected with the buttons. Some times just checking how the animation is working by itself is a good start point for debugging something.

 

I'll keep looking into it and see if I can find something in the way that the instances are created that is causing these jumps.

 

Happy Tweening!

[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!