[Trying to replace images on a specific div]

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

[Trying to replace images on a specific div]

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