ScrollTrigger horizontal vs vertical

[Plasmic]

Hey guys,

Loving the ScrollTrigger plugin

I'm building a horizontal scroll site, however at a certain point I would like to switch to vertical depending on the viewport. 
Currently when the condition is met I try to kill the ScrollTrigger like this: 
 

ScrollTrigger.getById('id').kill();

And then re-initialise the whole timeline including ScrollTrigger like this: 
 

this.tl = gsap.timeline({
  scrollTrigger: {
    id: `id`,
    trigger: this.$refs.wrapperRight,
    horizontal: this.isHorizontalScroll,
    start: "10% 90%",
    end: "100% 0%",
    scroller: this.containerEl,
    markers: true,
    toggleActions: "play reverse play reverse"
  }
});

This works if the "this.isHorizontalScroll" value stays the same. However if it changes, the markers that determine the start and stop position of the trigger scrolling along with the container, and i'm unable to get it to work. 

I can make a codepen demo if needed however maybe there is another way to kill the ScrollTrigger as it looks like some values are not cleared. 

Thanks in advance,

Cheers,

M

[ZachSaucier]

Hey Plasmic and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

I'm very curious why you need to kill things in the first place. You can just fake horizontal scrolling with tweens that translate elements like our demos show (go to the "Navigating content" section of the demos).

[Plasmic]

Hey Zach,

 

Thanks for your reply.

The thing is that I'm not faking the the horizontal scroll. It actually is scrolling horizontally by hijacking the scroll/mouseWheel and setting scrollLeft off the container. But for screens smaller than 1024 I would like to have the ScrollTriggers vertically so no (read less ) hijacking. This is scenario only happens when resizing. Because the triggers, and animations will be different I assumed killing the old and creating new animations would be my best bet. 

I'm still prototyping if this is the way to go, but for now I'm stuck since I can't seem to figure out a way to remove and re-apply the ScrollTriggers with different settings. (horizontal: true/false).

This is probably not the average use case, haha, but any help would be much appreciated 

Cheers,

M

[ZachSaucier]

So you're saying that you want certain ScrollTriggers on some viewports and others with other viewports? That's exactly what .matchMedia() is for  

[Plasmic]

Hey Zach, 

Thanks for pointing me in the right direction. However I still have the same issue when i use the matchMedia. I've adjusted the matchMedia example on codepen. It's a bit rough but you will see the issue: 

See the Pen wvGBPme by plasmic (@plasmic) on CodePen

Steps to reproduce: 
- Desktop viewport: horizontal scroll -> animation works as expected
- Resize window to mobile
- Mobile viewport: vertical scroll -> Now the mobile animation is not working
- Click the codepen 'run' while still on mobile and then mobile animation does work.

It feels like some information remains in cache.
 

[akapowl]

 

Just something I noticed:

If you test it the other way around, you'll notice, that the ScrollTrigger keeps responding to the initially set Scroll-Orientation.

 

Steps to reproduce: 

- MOBILE viewport: VERTICAL scroll -> animation works as expected
- Resize window to DEKTOP

- DESKTOP viewport: HORIZONTAL scroll -> Nothing

- DESKTOP viewport: VERTICAL scroll -> Animating desktop element

 

 

Feels like the 'horizontal: true/false' part is not being considered by ScrollTrigger when killing & re-initiating the triggers !?

 

[GreenSock]

Good catch. I believe that's fixed in the upcoming release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Better? 

[akapowl]

 

I was about to say 'nay' but I forgot, I had to clear my cache.

 

Definitely works now. Good Job!

And since I too might be using this soon, first and foremost: thank you!

 

 

[Plasmic]

Yes it is working now! Very happy with that! Thanks for the fast reply/fix!

When will the next official release be?

 

Thanks again guys! Awesome plugin!

 

[ZachSaucier]

1 hour ago, Plasmic said:

When will the next official release be?

We're hoping to release it in the next few days.