Simple opacity on images

[ceescoenen]

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?

[OSUblake]

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. 

[PointC]

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

 

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

[ceescoenen]

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?

 

[PointC]

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

 

Happy tweening.

[Cassie]

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?

[Cassie]

Snap @PointC 💜

[ceescoenen]

@PointC @Cassie You can see it here : https://staging.e-chopperleusden.nl/huur-je-fatmax/

 

I have only add the code from the first post on the page. 

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

[PointC]

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"

[ceescoenen]

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