Jump to content
GreenSock

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

Simple opacity on images

Recommended Posts

I am new and have see some examples. What I want is three vertical images that fade in each after each when the page is load. Maybe some movement, but my problem is how to do the opacity from 0 to 1 in 750ms, 1000ms and 1250ms when the page is load?

Link to comment
Share on other sites

Welcome to forums @ceescoenen

 

Have you checked out our Getting Started guide? Go through that, and then check out a Timelines.

 

Your animation sounds pretty straightforward. Just set the opacity of your images to 0 in your CSS, and then animate them in. 😀

 

gsap.timeline()
  .to("#image1", { opacity: 1, duration: 0.75 })
  .to("#image2", { opacity: 1, duration: 1 })
  .to("#image3", { opacity: 1, duration: 1.25 });

 

If you need anymore help, please put what you have in a minimal demo

  • Like 2
Link to comment
Share on other sites

Just another approach. Happy tweening and welcome to the forum. :)

 

See the Pen rNzVgLO by PointC (@PointC) on CodePen

  • Like 2
Link to comment
Share on other sites

9 minutes ago, OSUblake said:

Welcome to forums @ceescoenen

 

Have you checked out our Getting Started guide? Go through that, and then check out a Timelines.

 

Your animation sounds pretty straightforward. Just set the opacity of your images to 0 in your CSS, and then animate them in. 😀

 

gsap.timeline()
  .to("#image1", { opacity: 1, duration: 0.75 })
  .to("#image2", { opacity: 1, duration: 1 })
  .to("#image3", { opacity: 1, duration: 1.25 });

 

If you need anymore help, please put what you have in a minimal demo

 

Thank you. This works but it isn't smooth. How can I make this more smooth?

 

Link to comment
Share on other sites

Probably use a linear or 'none' ease. We can better assist you with a minimal demo.

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

If it's not smooth I would assume that you have really large image files or some styling making it hard for the browser to render things.

It's quite hard for us to tell without seeing a minimal demo though.

Could you pop one together for us?

  • Like 1
Link to comment
Share on other sites

You're using an elastic ease. 

gsap.timeline()
.to("#image1", { opacity: 1, duration: 0.75, ease: "power1" })
.to("#image2", { opacity: 1, duration: 1, ease: "elastic" })
.to("#image3", { opacity: 1, duration: 1.25, ease: "elastic" });

Please try "linear" or "none"

  • Like 2
Link to comment
Share on other sites

@PointC sorry! I have try some settings and go to bed. I will look tomorrow

 

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