Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
DRock

Swapping Img Src with Timeline // TweenMax

Recommended Posts

I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence

 

What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image.

 

I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property.

 

I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue.

 

Here is the code as of now:

 

<body>

    <img src="images/7.gif" id="seven">
    
</body>

 <script>

    var seven = document.querySelector("#seven");     
    var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2});

    window.onload = function() {
        tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100})
            .to(seven, 0.1, {y: + 100, x: + 300})
            .to(seven, 0.4, {css:{src: "images/7777777.png"}});

 

            var pathSource = String(seven.src);
            console.log(pathSource);
    }  
</script>

Link to post
Share on other sites

Hi DRock  :)

 

pls try like this :

var tl = new TimeLineMax()
.to(.......)
.to(.......)
.set(seven,{attr:{src:"images/7777777.png"}})

//or
//.add( function(){ seven.src="images/7777777.png"; })
  • Like 4
Link to post
Share on other sites

Thanks Diaco, this was helpful in understanding the syntax and the right approach. Unlike my reply, I do appreciate the quick response time.

 

Both approaches work and it was difficult to find an example to decipher that wasn't significantly more complex.

 

I am an Ancient Warrior as well and my battle axe of choice also happens to be the Guitar .. rock on \m/

Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×