Figo Posted May 26, 2021 Share Posted May 26, 2021 I'm using scrollTrigger to animate an object when an other object enters into the viewport. It works all fine when I scroll down but when I scroll up (with reverse in my toggleActions) it seems to "jump". Here is a demo I created to better demonstrate what I'm trying to achieve. Link to codesandbox =>: https://codesandbox.io/s/icy-bash-180e8?file=/src/App.js Apologies if the codesandbox demo seems jumpy (not sure why) but in my actual project it is lot smoother, until I scroll up and want the animation to reverse. It goes straight from the last <li> in my list to the first <li> . In other words from the fourth <li> straight to the first <li>. What I'm trying to achieve in the demo is when I scroll down and section02 enters the viewport my list moves up (y:-35), when section03 enters viewport my list moves up (y:-70) etc. and vice versa for scrolling up. Here is also a snippet of my code as well: import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); useEffect(() => { gsap.to('.list', { scrollTrigger: { trigger: ".section02", toggleActions: "play pause pause reverse", //markers: true }, y: -35, ease: "none", }); gsap.to('.list', { scrollTrigger: { trigger: ".section03", toggleActions: "play pause pause reverse", //markers: true }, y: -70, ease: "none", }); gsap.to('.list', { scrollTrigger: { trigger: ".section04", toggleActions: "play none none reverse", //markers: true }, y: -105, ease: "none", }); },[]); What am I doing wrong, any advise would be super appreciated. Link to comment Share on other sites More sharing options...
Cassie Posted May 26, 2021 Share Posted May 26, 2021 Hey pal! I'm not sure that I'd approach this in this way. It seems like there's some logic overlaps, you're repeating yourself a bit and it's not really easily extendable. How about something like this? See the Pen bbb98c6a854a823544b16342ae7a012e?editors=1010 by cassie-codes (@cassie-codes) on CodePen I've commented the code so you can see what's going on - But the main idea is to loop through the sections, and when the sections are leaving or coming back in to the viewPort, adjust the position of the list. I've tweaked some CSS too to make the list adjustment line up with the border you set. 1 Link to comment Share on other sites More sharing options...
Figo Posted May 26, 2021 Author Share Posted May 26, 2021 Thanks @Cassie, appreciate the response! Nice proposal. Unfortunately in my React app the entire list goes half way up when the second section enters viewport and in the last section it shoots straight up above the border box. I'm trying to troubleshoot why it's doing it with this proposal. Silly question but if the sections have different heights will this still work? I've given all my sections (components) the same classname as the codepen but I'm not sure why the list is not aligning correctly with the borderbox. I wonder if this variable: let percentageShift = 100 / sections length , is effecting it, as I do have other components that's animating in and out of my homepage plus a navbar (but they do have different classnames though). I'm trying to do something similar to this section indicator by using Gsap and Scrolltrigger (bottom left corner when you scroll) Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 26, 2021 Share Posted May 26, 2021 Hi @Figo, So, if you just have toggleActions: "play none none play" it should tween/play to the y value you selected. Reverse is generally for reversing a single animation not tied to other sections. You'll also want to be sure to set your end value as well. Link to comment Share on other sites More sharing options...
Figo Posted May 27, 2021 Author Share Posted May 27, 2021 Thanks @elegantseagulls . Noted , thanks now I know reversing is only for single animation. Having toggleActions on "play none none play" is still giving me the same problem once the user scrolls up. Is there a way to play scroll animation when the user scrolls down and then reversing the animation when the user scrolls up with gsap? Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted May 27, 2021 Solution Share Posted May 27, 2021 Ah, I see. For this instance, you may consider setting up a ScrollTrigger.create({...}) then use the onToggle with isActive (https://greensock.com/docs/v3/Plugins/ScrollTrigger/isActive)(or onEnter, and onEnterBack) to run a gsap.to() tween, that way gsap shouldn't have a preset memory of the "0" position. Basically: ScrollTrigger.create({ trigger: ".section04", onToggle: self => { if (self.isActive) { gsap.to('.list', { y: -105 }) } } }) 3 Link to comment Share on other sites More sharing options...
Figo Posted May 27, 2021 Author Share Posted May 27, 2021 Thanks @elegantseagulls you just made my day!@Cassie and yourself are rockstars for responding. 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