Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Simple Fade in and out

Go to solution Solved by PointC,

Recommended Posts

Hi, I know there's probably a really easy solution to my question but I'm brand new to all of this. I have this coffee cup animation I made and I'd like the steam to fade in, move up, and then fade out and loop so that once the cup is filled the steam is still constantly rising from the cup. Currently, I have the steam fading in and moving up but I can't figure out how to get it to fade back out without also having it move down. I included a codepen if that helps, I know it's not moving so I apologize (I've never used codepen before) but I thought seeing the code would help a bit. I appreciate any help, thanks so much.

See the Pen wvyrxWo by nicoleanowa (@nicoleanowa) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @nicoleanowa :)


Welcome to the forum.


My recommendation would be to place each steam heart on its own timeline. That way you can repeat one before the other two have finished. I separated the autoAlpha and y tweens since I wanted the autoAlpha to yoyo and fade back out as it hits the end of its movement. You'll see all the durations and repeatDelays are based on the dur variable. That way you can simply adjust one value to your liking.


See the Pen 473a8aa94e4274966c383d83bbd3646f by PointC (@PointC) on CodePen


Hopefully that helps. Happy tweening and welcome aboard.



  • Like 3
  • Thanks 1
Link to comment
Share on other sites

show off 😉


(This is lovely)

  • Like 1
  • Haha 2
Link to comment
Share on other sites

Hi @PointC,

This definitely helped! Thank you for your response! 

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