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.

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?

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