heniam

@Shaun Gorneau added the code pen, I am trying to switch between several images just put sample images in the codepen.

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"}});