Jump to content
Search Community

Change img src over time?

Torben test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

...and if so how?


What I need to do is over time (and with an ease if possible) change the src of an img tag between 10 different images that I have in an array (either the path to them or the images created by js).


I see there's a new attr plugin - is that what I need?

Link to comment
Share on other sites

This is impossible to animate just by changing an attribute. You will need to use multiple elements stacked on top of each other, and crossfade between them. 2 would be enough if you change the attributes after each fade. There have been many posts regarding this sort of thing in the past, so you can search the forum to find out more.

  • Like 1
Link to comment
Share on other sites

I know what you mean. I can't animate the actual change between the images - that's impossible.


But that is not what I needed. The change between all the source images should happen over fx. 1 second so that it shows each image within that timeframe and ends on the last one.


But I figured it out in the meantime - this is my code boiled down.

<div class="storyNumber" no="0"><img src=""></div>
function updateNumber() {
    var no = $storyNumber.attr('no');
    var $img = $storyNumber.find('img');
    $img.attr('src', 'http://localhost/images/number_' + numberArray[no] + '.png');        

var numberArray = [0, 127, 89, 80, 8, 200, 20, 87, 3]; 
var $storyNumber = $('.storyNumber'); 
TweenMax.to($storyNumber, 1.2, {
    attr:{no:10}, roundProps:'attr',
    onUpdate: updateNumber,
    onComplete: function() { $storyNumber.attr('no', 0); }
Link to comment
Share on other sites

Ah sorry I interpreted the question slightly wrong. That's a great solution there. You could also do this with a timeline, something like this:

var t = new TimelineLite({ paused: true }),
    n = [0, 127, 89, 80, 8, 200, 20, 87, 3],
    img = $('.storyNumber').find('img').get(0);

for (var i = n.length - 1; i >= 0; i--) {
  t.set(img, {attr:{src:'http://localhost/images/number_'+n[i]+'.png'}}, i);

TweenLite.to(t, 1.2, { progress:1, ease:Power4.easeInOut });

(untested, but it should at least be close to correct)

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...