Animation on load and than on scroll on the same element.

[alonK]

Thanks again for this awesome plugin,

I'm trying to combine 2 animations,

 

Onload text change opacity from 0 to 1

Onscroll text change opacity from 1 to 0

 

In my local dev site the opacity jumps when you start to scroll with no ease or scrub, I guess the 2 timelines are effecting each other.

 

I tried to create the error on a codepen and could not, it seem to work fine in the codepen, but you can see what I'm trying to do.

I'm looking for a way to work correctly with 2 timeline on the same element on load and on scroll not effecting each other,

 

Thanks for the help!

 

See the Pen LYqdZmK by Aloillu (@Aloillu) on CodePen

[alonK]

Another issue that you can see in the demo is when the user start to scroll before the first animation is done.

It meeses up the scrolltrigger tl for the opacity

[mvaneijgen]

I would create a timeline of your first animation and let the timeline handle the timing/delay with the use of the position parameter. And onComplete of that timeline call a function on which with you crate your ScrollTrigger. 

 

I think you've got two options getting this effect to work, but either one has it's downsites 

1. Disable scroll until your animations is done, this kinda feels like the page is defect and/or there is no more content on the page. Maybe adding a arrow down that bounces when your animation is done is a solution?
2. In the ScrollTrigger function, check if the visitor  has already scrolled and then don't create the ScrollTrigger. This way there will be no scroll animation, but the visitor is probably in a hurry, so how much that matters is up to you. 

Hope it helps and happy tweening!  

 

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