ceescoenen Posted October 13, 2021 Share Posted October 13, 2021 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 More sharing options...
OSUblake Posted October 13, 2021 Share Posted October 13, 2021 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. 2 Link to comment Share on other sites More sharing options...
PointC Posted October 13, 2021 Share Posted October 13, 2021 Just another approach. Happy tweening and welcome to the forum. See the Pen rNzVgLO by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
ceescoenen Posted October 13, 2021 Author Share Posted October 13, 2021 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 More sharing options...
PointC Posted October 13, 2021 Share Posted October 13, 2021 Probably use a linear or 'none' ease. We can better assist you with a minimal demo. Happy tweening. 2 Link to comment Share on other sites More sharing options...
Cassie Posted October 13, 2021 Share Posted October 13, 2021 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? 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 13, 2021 Share Posted October 13, 2021 Snap @PointC 💜 1 Link to comment Share on other sites More sharing options...
ceescoenen Posted October 13, 2021 Author Share Posted October 13, 2021 @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 }); Link to comment Share on other sites More sharing options...
PointC Posted October 13, 2021 Share Posted October 13, 2021 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" 2 Link to comment Share on other sites More sharing options...
ceescoenen Posted October 13, 2021 Author Share Posted October 13, 2021 @PointC sorry! I have try some settings and go to bed. I will look tomorrow 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now