scrolltrigger animation starts as visible

[danwid]

Hi everyone,

 

I've created a codepen to illustrate my example - I have a text animation, that is working almost as I want it to. 

The only thing I'm struggling with is that first time I scroll down to the section the text is visible and then the animation begins. How do I change my code so that onEnter the text is not visible and then the animation starts. 
If someone can put that into better words that would be great

Here's the codepen: 

 

Also if there is an overall more effecient way to implement this other than what I have so far I'd love to learn.

 

Thanks in advance

Daniel

See the Pen YPKwQqj by woodydaniel (@woodydaniel) on CodePen.

[mvaneijgen]

Seems like you are building features your self that are already build in to ScrollTrigger. I've restructured your code a bit add a timeline and add ScrollTrigger to that timeline, now it will be easier to see what ScrollTrigger is controlling what animation. Then I've used the build in toggleActions (see the docs for more info https://gsap.com/docs/v3/Plugins/ScrollTrigger/) to restart the animation onEnter and onEnterBack.

 

I've also changed from a .fromTo() tween to a .from() tween, seen that you just want to animate to the browsers defaults eg opacity: 1 is the default and y: 0 is also the default (see https://gsap.com/resources/mistakes/ for more info). With these changes it seems to automatically animate from a hidden opacity but check out our FOUC post for even more on this topic  https://gsap.com/resources/fouc/ 

 

Hope it helps and happy tweening! 

 

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

[danwid]

Thanks for this @mvaneijgen. Reading through the links to the docs you posted. Really awesome stuff!

I would like however to also keep the same functionality as I had before - ie. that everytime the text goes off screen and then back in to view it should play the animation again (starting from opacity 0).

The pen you created works great for the first time around but when scrolling past the text and then back up and back down the text is visible and creates the FOUC.

[mvaneijgen]

Ah I see you want the animation to reset when it is out of view and then play again when the ScrollTrigger markers meet. I've now reinstated ScrollTrigger you already had and have that one .set() the opacity of the chars onLeave and onLeaveBack

 

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

[danwid]

@mvaneijgen awesome thank you for this. I only had a chance to look at this now. 

 

2 questions:
1. Is the second scrolltrigger you created with id = reset - that is in addition to the scrolltrigger in the timeline and is simply dealing with setting the opacity back to 0 on the onLeave and onLeaveBack? And is this why you have added 'none' for the two options in the first scrolltrigger  toggleActions: "restart none restart none" ?

 

2. I am being pedantic but when I scroll past the text with the animation and I scroll past before the animation has completed, then on scrolling back the text which completed to animate is still showing and I am still getting that flicker when it resets and starts the anaimation again. 

What is casuing this? Is there a way to fix this? I'm not able to understand why this is happening after going through the code a few times.

 

Thanks

Daniel

[mvaneijgen]

33 minutes ago, danwid said:

1. Is the second scrolltrigger you created with id = reset - that is in addition to the scrolltrigger in the timeline and is simply dealing with setting the opacity back to 0 on the onLeave and onLeaveBack? And is this why you have added 'none' for the two options in the first scrolltrigger  toggleActions: "restart none restart none" ?

Yes that ScrollTrigger is to reset the text, but only when it is out of view. The toggleActions are a short hand for onEnter, onLeave, onEnterBack, and onLeaveBack in that order, so the two none are applying to onLeave do nothing and onLeaveBack, do nothing. See the docs for more info https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#toggleActions

 

34 minutes ago, danwid said:

2. I am being pedantic but when I scroll past the text with the animation and I scroll past before the animation has completed, then on scrolling back the text which completed to animate is still showing and I am still getting that flicker when it resets and starts the anaimation again. 

What is casuing this? Is there a way to fix this? I'm not able to understand why this is happening after going through the code a few times.

I've updated the pen to restart and pause the timeline instead of setting the characters to opacity 0, this seems to fix the issue. y

 

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

[danwid]

awesome! This works perfectly.

Can I ask what is acutally happening with the restart().pause() ?

[mvaneijgen]

.restart() moves the "playhead" to the start of the tween eg second 0 and .paus() pauses at that point. So it's like setting a video back to the zero position and waits there until it gets triggered again.

[Rodrigo]

Hi,

 

Just as an FYI on top of @mvaneijgen's great advice, you can achieve the same withpause(0)that will take the Tween/Timeline's playhead to 0 seconds and set it's state to paused.