Filename makes problem

[Svein-Tore]

Hi! I have made a very simple kind of slideshow changing the src of an img tag (id=galleri)  like this:

 

var tl= new TimelineMax({repeat:-1});
tl.to("#galleri",2,{src:"bildegallery_1.jpg"})
tl.to("#galleri",2,{src:"bildegallery_2.jpg"})
tl.to("#galleri",2,{src:"bildegallery_3.jpg"})

 

GSAP  goes "crazy" with erros like:

GET http://localhost:63342/fagdag2018/bildegallery_25502.66384475.jpg 404 (Not Found)
bildegallery_24824.033964000024.jpg:1 GET http://localhost:63342/fagdag2018/bildegallery_24824.033964000024.jpg 404 (Not Found)
bildegallery_24154.55656875005.jpg:1 GET http://localhost:63342/fagdag2018/bildegallery_24154.55656875005.jpg 404 (Not Found)

 

This is only three out of a continously feed of errors.

 

But If I change the filenames to:

 

"bildegalleryone.jpg

"bildegallerytwo.jpg

"bildegallerytrhee.jpg

 

Everythings works fine.   Any explanation?

 

Svein-Tore

[Carl]

You are trying to animate the src attribute (which is a string) of an image over 2 seconds. GSAP makes updates at 60 frames per second.

Your tweens are literally telling GSAP to change the src attribute 120 times. Each time a change to the src appears, the browser is going to try to load a new image.

 

GSAP is an animation engine so it naturally wants to change numeric values over time. In your example that isn't working GSAP recognizes that _1 and _2 that you use in your image names are numbers and tries to animate them (see tweening complex string values). Each time it changes those numbers, it generates a new src attribute, sets it, and the browser tries to load an image that doesn't exist.

 

I think you would be better off using set() (no duration) and the position parameter

 

var tl= new TimelineMax({repeat:-1});
tl.set("#galleri", {src:"bildegallery_1.jpg"})
tl.set("#galleri", {src:"bildegallery_2.jpg"}, "+=2")
tl.set("#galleri", {src:"bildegallery_3.jpg"}, "+=2")

So instead of animating the src value for 2 seconds, you set it to something new at 2-second intervals and the browser will hopefully retrieve the new image in time. 

 

Also, since src is an attribute you might want to use AttrPlugin. I'm kind of surprised what you did worked at all, but I guess somehow src is seen as a property of your selector.

 

tl.to("#galleri", {attr:{src:"bildegallery_1.jpg"}});

 

https://greensock.com/AttrPlugin

 

 

 

[Svein-Tore]

Thanks for your quick and fast respone Carl.  I will try it witht both set and attr as you suggersted.  On the other hand, I'm a teacher, and I guess some of my students will try this as a solution. So I guess I will change the names for the files to not exclude this solution.   

[Svein-Tore]

2 hours ago, Svein-Tore said:

Hi! I have made a very simple kind of slideshow changing the src of an img tag (id=galleri)  like this:

 

var tl= new TimelineMax({repeat:-1});
tl.to("#galleri",2,{src:"bildegallery_1.jpg"})
tl.to("#galleri",2,{src:"bildegallery_2.jpg"})
tl.to("#galleri",2,{src:"bildegallery_3.jpg"})

 

GSAP  goes "crazy" with erros like:

GET http://localhost:63342/fagdag2018/bildegallery_25502.66384475.jpg 404 (Not Found)
bildegallery_24824.033964000024.jpg:1 GET http://localhost:63342/fagdag2018/bildegallery_24824.033964000024.jpg 404 (Not Found)
bildegallery_24154.55656875005.jpg:1 GET http://localhost:63342/fagdag2018/bildegallery_24154.55656875005.jpg 404 (Not Found)

 

This is only three out of a continously feed of errors.

 

But If I change the filenames to:

 

"bildegalleryone.jpg

"bildegallerytwo.jpg

"bildegallerytrhee.jpg

 

Everythings works fine.   Any explanation?

 

Svein-Tore

OK, so I have tested:

 

Solution 1:

             

      var tl= new TimelineMax({repeat:-1});
      tl.set("#galleri", {src:"bildegallery_1.jpg"})
      tl.set("#galleri", {src:"bildegallery_2.jpg"}, "+=2")
      tl.set("#galleri",src"bildegallery_3.jpg", "+=2"

 

Works partly, image bildegallery_3.jpg won't show up.

 

Solution 2:

 

tl.to("#galleri", {attr:{src:"bildegallery_1.jpg"}});

 

I think you lost the time, change it to tl.to("#galleri",2, {attr:{src:"bildegallery_1.jpg"}});

 

Then I get the same problem as  I started  with.  So I conclude I have to change the image names......???

[Carl]

Solution 1, as you provided has some typos in the third set.

 

https://greensock.d.pr/KHuWgi

 

Not sure if that is your real code or not.

 

My code looks better

var tl= new TimelineMax({repeat:-1});
tl.set("#galleri", {src:"bildegallery_1.jpg"})
tl.set("#galleri", {src:"bildegallery_2.jpg"}, "+=2")
tl.set("#galleri", {src:"bildegallery_3.jpg"}, "+=2")

 

I think you lost the time, change it to tl.to("#galleri",2, {attr:{src:"bildegallery_1.jpg"}});

 

my mistake, that should actually be a set(), which should not have a duration.

 

tl.set("#galleri", {attr:{src:"bildegallery_1.jpg"}})

 

If you still have problems please provide a simple demo, preferably using an online editor like codepen. You will just need to upload your images somewhere

 

 

 

 

 

 

 

[Acccent]

I wanted to make a small test to show the position property (which is what I assume @Svein-Tore was thinking of when they said that Solution 2 was missing the time), using the imagesLoaded plugin to only switch to images that are ready to be displayed, but I encountered unexpected behaviour, not sure what's up with it. Here's the codepen regardless, the timeline code is good:

 

See the Pen QmoXyw?editors=0010 by Acccent (@Acccent) on CodePen

 

[Carl]

Hey Acccent,

 

Nice demo! I'm seeing that the image src changes every 3 seconds. 

What exactly is the unexpected behavior? 

When you say the timeline code is good does that mean the unexpected behavior isn't related to GSAP?

 

Let us know some more details and I'll give it another look

 

C

 

 

[Acccent]

Ah yeah, sorry that wasn't clear, the problem is totally unrelated to GSAP I assume.

 

The only unexpected thing is, the new batch of images should only appear after it's fully loaded, but that's not what I get (my internet speed is probably a bit slow) and instead I get irregular patterns and images not changing even when, in the console, I do see the src attribute being changed.

 

The only weird thing I noticed with GSAP is that when I tried setting onRepeat and repeatDelay on a TweenMax, it didn't work and I had to use TimelineMax. But that's completely unrelated to this thread! I'll create another one if I do run into the issue again in the future and can't figure it out