Scrolltrigger with batch works only properly when from top to bottom

[marky]

Hello!

 

Im trying to use scrolltrigger with batch where the goal is to animate each element inside a row, and it should trigger when each element is in viewport. And it seems to work properly when scrolling from top to bottom. But if i refresh in the middle or end of the page and try to scroll up it seems to trigger ALL the elements to start animation. I want the animation to work same as when scrolling from top to bottom. 

I have made simple codepen for the setup I'm currently using. Any help or pointing of direction on how to achieve this would be very appreciated

See the Pen qBLqOZp by marky_94 (@marky_94) on CodePen

[mvaneijgen]

Hi @marky welcome to the forum!

 

The problem here is there is no counter to the onEnter animation. I've forked your pen and enabled the markers to see visually what is going on. On page load I scroll the page and thus the start markers have scrolled past all the start triggers of the elements, thus they all start animating. If you want something different to happen onLeave, you have to tell it what to do, otherwise it will just do your onEnter tween. 

 

See the Pen PoXbPxo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Here is a fork of the ScrollTrigger.batch() demo which does have all the other callbacks set and it also scrolls the page on load. As you can see this will also trigger the onLeave callback and thus the boxes stay hidden. Hope this clears things up. 

 

See the Pen JjwbYmB by mvaneijgen (@mvaneijgen) on CodePen

 

Side note I've commented // toggleActions: 'play none play none', out, because this is a ScrollTrigger property and will do nothing on a tween itself. 

[marky]

Thank you for a fast reply!

 

I have been playing around with the different states but i still can't seem to get it to work as i want. The example you have provided works when scrolling either way but the problem is that the animation "resets". I do not want the animation to loop over and over. What i want is that the  animation just does it once but for all scnearios when the element is in viewport when scrolling either from top, middle or bottom of the page. 

Maybe batch is not the correct way to achieve this? 

[Rodrigo]

Hi,

 

The main issue I see here is that you're not using the callbacks properly and you have basically the same animation in every callback.

 

Initially you set the opacity to 0 and y position to 100, then you animate each batch to opacity 1 and y 0 in the onEnter callback. Then you have this on the onLeaveBack:

onLeaveBack: batch => gsap.to(batch, {
  autoAlpha: 1,
  y: 0,
  stagger: 0.2,           
}),

That basically animates each batch from their current state (opacity: 1 and y: 0) to the same state, hence nothing happens visually, but ScrollTrigger is doing what is supposed to do, you're just giving the wrong instructions to it soto speak.

 

Maybe you're looking for something like this:

See the Pen rNoWWNg by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[marky]

Sorry been messing around in the codepen so its a little messy.

 

I managed to get the same effect as you showed in the codepen but that's not what im after. I only want the animation to happen once, not every time it leaves or enters the element. I know the property once:true exists but then it only works for onEnter and the animation will not work if i refresh the page on the bottom and scroll upp.

 

So for example, when i enter the page from top to bottom it works properly, it animates each element once and thats it. But if i refresh at the bottom or middle of the page it triggers all the animation above as im gussing it assumes they have already entered the viewport somehow? But i want those animations to not be triggered until i actual get there with scroll? And the animation should only happen once on the element (.box) in our case.

 

 

[mvaneijgen]

I think that will require some amount of custom code. You want to check in the onEnter function if the animation has already run on that particular element and then not do anything. And on the onLeave event you still want to hide them (for when you start from the bottom of the page), but don't do that if the onEnter (or onEnterBack) function has run. 

 

I don't know if the .batch() function is the right call for that particular effect, maybe start with just a ScrollTrigger for each element, there is always time to optimise later. I don't have time to set up something for you and this also kinda falls out of the scope of these free forums, but if you give it a go and post back here when you run in to specific problems, someone will be sure to help you out. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

[Rodrigo]

Hi,

 

Yeah I think Mitchel is right. I've been tinkering with this for a bit and it might not be the simplest thing to do. What you're seeing right now is not a bug but the way browsers work normally. If you refresh your browser window/tab, the browser just reloads everything which causes the JS code to be executed and at that point ScrollTrigger is going to check the current scroll position and update every ScrollTrigger instance accordingly at that point.

 

I'm pretty sure that with enough custom logic and perhaps a few changes in the HTML structure you could achieve this, but this is beyond the help we can provide in these free forums. You can hire us on a consulting basis or post in the Jobs & Freelance forums to get help there.

 

The only thing I can offer you right now is to use ScrollTrigger's clearScrollMemory() method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

ScrollTrigger.clearScrollMemory("manual");

That will set the scroll position of the window at 0 on refresh so it will feel more natural, but it might not be the behaviour you're after.

 

Hopefully this helps.

Happy Tweening!