Trying to replace images on a specific div

[heniam]

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

[Shaun Gorneau]

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

[heniam]

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

[Shaun Gorneau]

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