Filip1139 Posted June 24, 2020 Share Posted June 24, 2020 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/ See the Pen xxZrPEO?editors=0110 by nomad1139 (@nomad1139) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 24, 2020 Share Posted June 24, 2020 Hey Filip and welcome to the GreenSock forums. It's really hard for us to help blindly. Can you please modify the CodePen that you're basing things off of until you can recreate the error that you're talking about? Link to comment Share on other sites More sharing options...
Filip1139 Posted June 25, 2020 Author Share Posted June 25, 2020 ok thank you, i fixed my mistake. I would like the boxes not to overlap when returning up Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 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. 2 Link to comment Share on other sites More sharing options...
Filip1139 Posted June 26, 2020 Author Share Posted June 26, 2020 (edited) @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 { direction, isActive } = 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 June 26, 2020 by Filip1139 I find other way to do it Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 26, 2020 Share Posted June 26, 2020 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 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