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