Jump to content
Search Community

Batched scrolltrigger from animation behaving different to normal from animation

sixtillnine test
Moderator Tag

Recommended Posts

I've been using from animations to fade in elements using opacity. Normally GSAP will modify the target element(s) with a 'starting' opacity of 0 - which is great.


However the batch function I've been using does not do this, hence if the start point of the animation is anywhere in the viewport the element will appear at full opacity then jump to zero as the start marker is crossed.


I'm trying to achieve a staggered effect for a group of tiles - if there is a better way of doing this - I'm all ears.

See the Pen zYKReLE by sixtillnine (@sixtillnine) on CodePen

Link to comment
Share on other sites

As far as I can tell, it's doing exactly what it's supposed to do. The problem is that you've got things set up so that the batch doesn't get triggered until the boxes reach the center of the viewport and you've got everything at full opacity to begin with, so there's nothing telling those boxes 'below the fold' to be opacity: 0 initially. It's just a logic issue in your code/setup. 


The solution: just set the opacity to 0 initially (perhaps in the CSS) and then use a to() tween to make it go to 1 in the batch, like this: 

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


Is that what you're looking for? 

  • Like 3
Link to comment
Share on other sites

OK, however in other from animations I haven't had to set the initial opacity to zero.


If you have a look at the green boxes in the original code pen, they are styled the same as the red (apart from the colour), but GSAP sets their initial opacity to zero?


P.S. - I'd set the start halfway up so you could see the effect. I noticed the issue as the bottom of the viewport can shift in iOS as the address bar is animated to it's compact size.

Link to comment
Share on other sites

That is the expected behavior. Let me explain:

In the case of the batch, your .from() tween is inside of the onEnter callback. That means that the function is not called until the trigger is entered. So the .from() tween isn't created on load, it's created when the trigger is entered. 


In the case of your tween with a ScrollTrigger, the .from() is created on page load but paused at the start. Then it gets played when the trigger is entered. See the difference? 

  • Like 2
Link to comment
Share on other sites

Thanks Zach, could you point me in the direction of the documentation that would help me modify that behaviour to what I'm trying to achieve with the batch.



Triggered by the batch.

Primed on page load.


If not possible I'll add the zero opacity style via JS, but if it could all be handled by GSAP it would save me a step.

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