Split text animation on click

[Istraz]

Hello, I'm new to GSAP and JS in general, but I wanted to add animation to my burger menu on click.

 

let typeSplit = new SplitType(".mobile-menu-page-container", {

types: "lines, words, chars",

tagName: "span",

});

 

// plain JavaScript version

document.querySelector(".burger-wrap").addEventListener("click", function () {

setTimeout(function() {

gsap.from(".mobile-menu-page-txt .char", {

y: "110%",

opacity: 1,

rotationZ: "10",

duration: 0.2,

ease: "power1.out",

stagger: 0.05,

});

}, 200);

 

});

 

Everything works on the first click, but if I open and close the menu, it looks strange. What can I do?

Thanks

[mvaneijgen]

Hi @Istraz welcome to the forum!

 

Right now you're creating a new tween on click every time! It is better to create a tween on page load and then on click just call .play() or .reverse() if it has already played. 

 

It is hard to give advice without a minimal demo, so if you could create one we would be happy to dive in to the code with you. I would also recommend checking the awesome getting started guide, this walks you through all these handy features of GSAP https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

[PointC]

You're using .from() tweens. When you interrupt one and then start a new .from() tween animating the same property, you probably won't get the desired results.

 

Say you have a div sitting at x:0 and you tween from x:100, but you start a new tween before that one is finished. Now the new tween will still start from x:100, but will finish at wherever you interrupted the last tween as that is the new final position. Say it was at the half way point, the new tween would now go from 100 → 50 rather than 100 → 0. 

 

That's why your splitText letters start to look weird with multiple plays. The easiest solution is as @mvaneijgen suggested - make a tween/timeline and play()/reverse() on click .

 

Happy tweening.