check if a column exists in a SQL Server table

Killing a GSAP timeline / reverting a splitText instance across multiple elements

Anderson

As the questions says, I'm trying to kill all TimeLines / revert all SplitText instances, which were attached to multiple elements using the jquery .each() function.

I've created a Codepen with a reduced example so people can see the full code and what I've tried so far:

https://codepen.io/OneManLaptop/pen/bGvQgGL?editors=1010

As you can see, when users hover over the boxes, a nice SplitText animation plays but I need to be able to remove all trace of it.

The desired functionality in this reduced example, is that when the user clicks the "revert" button below the three blocks, all instances of the animatiesNavHoverTl TimeLine are killed and all instances of animatiesTextSplit are reverted to their pre-split state.

So far I've created a revert function which is called when each timeline is played but this obviously isn't ideal as it's calling the function every time the element is hovered and the function is only applied to elements which have been hovered over and not all elements which are attached to the TimeLine.

I'll paste the code of the reduced example below:

$(".animaties nav a").each(function(i, element) {

    var span = $(element).find("span"),
        img = $(element).find("img"),
        animatiesTextSplit = new SplitText(span, {
            type: "words,chars"
        }),

        animatiesChars = animatiesTextSplit.chars,
        animatiesNavHoverTl = gsap.timeline({
            paused: true,
            reversed: true,
            onStart: function() {

                revertFunc(animatiesNavHoverTl, animatiesTextSplit, element);

            }
        });

        animatiesNavHoverTl
        .set(animatiesChars, {
            transformOrigin: "center center -10px",
            backfaceVisibility: "hidden"
        })

        .to(animatiesChars, {
            duration: 2,
            ease: "back.out",
            stagger: {
                from: "start",
                amount: 0.1
            },
            y: 0.5,
            color: "green",
            rotationX: "-360"
        }, 0);

        $(element).hover(hoverAnim, hoverAnim);

        function hoverAnim() {
         if (animatiesNavHoverTl.reversed()) {
            animatiesNavHoverTl.timeScale(1).play();
         } else {
            animatiesNavHoverTl.timeScale(3).reverse();
         }
     }
 });

function revertFunc(animatiesNavHoverTl, animatiesTextSplit) {

    $("body").on('click', "#revert", function(event) {

        event.preventDefault();
        console.log("revert");

        animatiesTextSplit.revert();
        animatiesNavHoverTl.kill();

    });

}

Thanks to anybody who can offer any help.