heniam Posted April 13, 2021 Share Posted April 13, 2021 Hey, I am trying to make a banner that takes in many images and fade it to make the animation I needed. I have a specific height and width that I want to show the images. I don't want to use any css animations, just experimenting with gsap. I am getting net::ERR_FILE_NOT_FOUND; error when I get to the third picture am not sure why. my code is here Html <div style="width: 300px; height: 250px; border: 1px solid black;"> <img style=" max-width: 100%; max-height: 100%;" class="logo" src="img/Frame 1.jpg"> <img style=" max-width: 100%; max-height: 100%;" class="logoOne" src="img/Frame 1B.jpg"> <img style=" max-width: 100%; max-height: 100%;" class="logoTwo" src="img/Frame 2.jpg"> <img style=" max-width: 100%; max-height: 100%;" class="logoThree" src="img/Frame 3.jpg"> <img style=" max-width: 100%; max-height: 100%;" class="logoFour" src="img/Frame 4.jpg"> </div> js: var tl = gsap.timeline({repeat:-1}); tl.to(".logo", { duration: 1 }); tl.to(".logo", { attr: {duration: 1, opacity: 0 , src: "img/Frame 1B.jpg"}}); tl.to(".logoOne", { attr: {duration: 1, opacity: 0 , src: "img/Frame 2.jpg"}}); tl.to(".logoTwo", { attr: {duration: 1, opacity: 0 , src: "img/Frame 2.jpg"}}); See the Pen mdRxvLB by heniam (@heniam) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted April 13, 2021 Share Posted April 13, 2021 It would be helpful if you put this in a CodePen so we can see what is actually happening. I see a few issues, but they would best addressed once we see it in action. See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
heniam Posted April 13, 2021 Author Share Posted April 13, 2021 @Shaun Gorneau added the code pen, I am trying to switch between several images just put sample images in the codepen. Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted April 13, 2021 Share Posted April 13, 2021 Part of the misunderstanding here is that GSAP, at its heart, is designed to look for and tween numeric values. Things like x, y, scale, perspective, opacity, etc. When it encounters non-tweenable (non-numeric) values -- like display, position, text-align, etc. - what tends to happen is a jump to the new value. I say "tends to" because there are cases where GSAP is designed to accept string values; color values for example. In other cases, it parses an integer out of a string value to do what it can with it. In this case, your image filenames contain digits which can be parsed out. But that, in turn, creates a filename that does not exist. The bigger problem here is that src isn't "tweenable". Meaning, changing the image src from one path to another doesn't create a tween between the two values. I think what you're looking to do is fade (or cross dissolve) between 2 or more images in sequence. For that, you don't change the src value at all, just the tweenable property `opacity` -- or better yet `autoAlpha` -- of a series of images. See the Pen OJWvYaE?editors=0010 by sgorneau (@sgorneau) on CodePen 4 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