I have two problems: 1)GSAP delay on second time not fires 2)timeline not works properly

[terminator]

I have two problems: 1)GSAP delay on second time not fires 2)timeline not works properly it freezes but if you refresh page standing on scroll target it works. because of that i used GSAP from instead timeline from but then i encountered problem number one.

I added code pen, pls check it out.Thanks.

See the Pen dyQMLYw by karavajo (@karavajo) on CodePen

[GreenSock]

Be very careful about this: 

 transition: opacity 0.5s ease;

It looks like you may have a CSS transition applied to the same element you're trying to animate with GSAP. That'll totally get in the way of GSAP doing what it needs to do. 

 

The delay does occur the first time, but then when you scroll back up and then down again, all you've done is call reverse() which the playhead then stops once it gets to the beginning, and then you're calling play() when you scroll back down so that'll just start moving the playhead forward again (no delay). It's behaving exactly as it should. I think maybe you meant to use "restart" instead of "play" there because restart will include any delay.

 

See the Pen bGQpXKg?editors=0110 by GreenSock (@GreenSock) on CodePen

 

9 hours ago, terminator said:

)timeline not works properly it freezes but if you refresh page standing on scroll target it works.

I read that a few times and I still don't understand. The timeline approach certainly seems cleaner to me: 

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