Jump to content
Search Community

ScrollTrigger: Weird behaviour with reverse in toggleActions.

Figo test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

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

  • Solution

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 })
    }
  }
})

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...