Gsap slideshow animation

[Daniel Hult 34 Likes (Newbie)]

Hi!

In the codepen example - I have a slideshow with a small function called "animateSlide" that just maked the h1 tag red. At the moment it's happening very slow eventhough I've set it to one second. Any ideas why?

See the Pen aeqMMY by daniel-hult (@daniel-hult) on CodePen

[PointC 14,465 Likes (Superhero)]

That's happening because you keep adding tweens to the end of the timeline. Each click adds a one second tween in your animateSlide() function. You may want to use timeline.clear() at the beginning of that function.

 

Happy tweening.

 

[Daniel Hult 34 Likes (Newbie)]

Thanks for the reply! I tried implementing that, but then it doesn't do the animation when I click again.
I want the animation to run each time I click  

[PointC 14,465 Likes (Superhero)]

How about this:

timeline.fromTo(nextHeading, 1, {color: 'white'}, {color:"red"});

Does that help?