Jump to content
Search Community

ScrollTrigger content changing

Filip1139 test
Moderator Tag

Recommended Posts

Hi everyone. I started working with ScrollTrigger and I have a problem with changing the content based on my location. I tried to do it like on codepen, but it does not work as it wants. In the example, the last photo of the kitty sometimes appears and sometimes not. I want to make a similar effect as on https://skookum.com/

conent change.png

See the Pen xxZrPEO?editors=0110 by nomad1139 (@nomad1139) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for the clear demo. In general it's best to avoid affecting the same elements in different tweens/timelines that can conflict. Here's the sort of setup that I'd use instead:

See the Pen PoZjBzR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some side notes: 

  • If you find yourself using the same .querySelectorAll in a loop and getting individual elements from it, save it to a variable beforehand so you don't have to repeat the lookup work.
  • We recommend using the GSAP 3 format for durations and easing. 
  • You don't need to pass numerical values as strings most of the time.
  • Like 2
Link to comment
Share on other sites

@ZachSaucier  realy thanks for advice . 
Do you know how I can make the entry animation on timeline , but onLeave reset all delays? I updeted my codepen. 

 

 

Ok so I make it by toggle classes.  You can see it on codepen. I write something to still have visible by add class 'active'  last or first element depends of scroll direction. That how i make it. Any advices?

 

    ScrollTrigger.create({
        trigger: ".features",
        start: "top center",
        end: "bottom center",
        onToggle: self => {
            let { directionisActive } = self;
            const featureBoxes = document.querySelectorAll('.feature__info');
 
            if (direction == -1 && !isActive) {
                featureBoxes[0].classList.add('active')
            } else if (direction == 1 && !isActive) {
                featureBoxes[featureBoxes.length - 1].classList.add('active')
            }
        }
    });
Edited by Filip1139
I find other way to do it
Link to comment
Share on other sites

Going forward, please use the "fork" button when updating your demo so that the previous version is retained and people looking at the thread in the future have the full context :) 

 

In general we recommend not using CSS transitions as using GSAP will give you more control and be less error prone. With that being said, inside of the loop in my pen you could use the index i to do a different animation in whatever callback as you please. 

if(i === 0) {
  // Handle first case specially
} else if(i === featureImgs.length - 1) {
  // Handle last case specially
} else {
  // All the ones in between
}

 

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...