Share Posted November 4, 2015 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 comment Share on other sites More sharing options...
Share Posted November 4, 2015 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"; }) 3 Link to comment Share on other sites More sharing options...
Author Share Posted November 19, 2015 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now