Jump to content
Search Community

Fade in and Fade out on timeline

b0nes test
Moderator Tag

Recommended Posts

So my goal is eventually to have multiple images using this animation on scroll. But I would like the image to start at 0 opacity and fade in then when it is leaving the screen to fade out. I have used another tl.fromTo before this to change its opacity but it doesnt seem fluid. Not sure if anyone could help me out with this!

See the Pen LYJpMGR by colemiller21 (@colemiller21) on CodePen

Link to comment
Share on other sites

If I understand your desired outcome correctly, I'd add a 2nd tween to the timeline which is half the duration of the position tween. That 2nd tween would animate from opacity:0 to opacity:1 Set yoyo:true and repeat:1. Make sure both tweens start at the same time with the position parameter and set the ease to your liking.


Hopefully that helps. Happy tweening.



  • Like 1
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...