Gsap slideshow animation

[Daniel Hult]

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]

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]

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]

How about this:

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

Does that help?