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>
