Plasmic Posted August 6, 2020 Share Posted August 6, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 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). Link to comment Share on other sites More sharing options...
Plasmic Posted August 6, 2020 Author Share Posted August 6, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 So you're saying that you want certain ScrollTriggers on some viewports and others with other viewports? That's exactly what .matchMedia() is for Link to comment Share on other sites More sharing options...
Plasmic Posted August 7, 2020 Author Share Posted August 7, 2020 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. 1 Link to comment Share on other sites More sharing options...
akapowl Posted August 7, 2020 Share Posted August 7, 2020 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 !? 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2020 Share Posted August 7, 2020 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? 3 Link to comment Share on other sites More sharing options...
akapowl Posted August 7, 2020 Share Posted August 7, 2020 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! 1 Link to comment Share on other sites More sharing options...
Plasmic Posted August 7, 2020 Author Share Posted August 7, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 7, 2020 Share Posted August 7, 2020 1 hour ago, Plasmic said: When will the next official release be? We're hoping to release it in the next few days. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now