Batched scrolltrigger from animation behaving different to normal from animation

[sixtillnine]

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

[GreenSock]

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? 

[sixtillnine]

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.

[sixtillnine]

I've updated the code pen to show how the same animation is treated differently by GSAP when in a batch.

 

The red box in in the batch, the green box is not. See how GSAP automatically assigns opacity 0 to the green box, yet not the red.

 

[ZachSaucier]

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? 

[sixtillnine]

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.

 

Staggered.

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.

[ZachSaucier]

I'm a bit confused. Jack already showed how do to it? He set the opacity to 0 in the CSS which prevents a flash of unstyled content. 

 

If you want to do the same thing with JS add this to the top of your JS:

gsap.set(".box", { opacity: 0 });

 

[sixtillnine]

Thanks Zach, I'll set it in the JS.

 

I didn't want to set it in the css as the element may contain information important to SEO.