How to create exit aniamtion after every word animation?

[nextwebd]

I am doing an animation with three different words. "MODERN" "CREATIVE" & "PERSONALIZED".

So basically every word has enter animation:

y: '100%', opacity: 0, duration: 0.6, ease: 'back.out(1.7)' });

And it will loop through 3 words. What I want to do is to add is the exit animation which would have y: -100%. I tried everything and it never worked. This is my code:

 

    import { onMount, onDestroy } from 'svelte';

 

    let textElement: HTMLElement;

    let gsap: any;

    let SplitText: any;

    let mainTimeline: gsap.core.Timeline;

 

    const words = ['modern', 'creative', 'personalized'];

 

    async function setupAnimation() {

        if (!textElement) return;

 

        try {

 

            const gsapModule = await import('gsap');

            gsap = gsapModule.gsap;

            SplitText = (await import('gsap/SplitText')).SplitText;

 

            gsap.registerPlugin(SplitText);

 

            mainTimeline = gsap.timeline({ repeat: -1, repeatDelay: 0 });

 

            function animateWord(word: string, nextWord: string) {

                const timeline = gsap.timeline();

 

                timeline

                    .call(() => {

                        textElement.textContent = word;

                    })

                    .add(() => {

                        const split = new SplitText(textElement, { type: 'chars' });

                        const chars = split.chars;

 

                        if (!chars || chars.length === 0) {

                            return;

                        }

 

                        gsap.set(chars, { y: '100%', opacity: 0 });

 

                        return gsap.to(chars, {

                            y: '0%',

                            opacity: 1,

                            duration: 0.6,

                            ease: 'back.out(1.7)',

                            stagger: 0.05

                        });

                    })

                    .to({}, { duration: 3 }) 

                    .add(() => {

                        const split = new SplitText(textElement, { type: 'chars' });

                        const chars = split.chars;

 

                        if (!chars || chars.length === 0) {

                            console.warn('No characters to animate out');

                            return;

                        }

 

                        return gsap.to(chars, {

                            y: '-50%',

                            opacity: 0,

                            duration: 0.5,

                            ease: 'power2.in',

                            stagger: 0.03

                        });

                    })

                    .call(() => {

                        textElement.textContent = nextWord;

                    });

 

                return timeline;

            }

 

 

            for (let i = 0; i < words.length; i++) {

                mainTimeline.add(animateWord(words[i], words[(i + 1) % words.length]));

            }

        } catch (error) {}

    }

 

    onMount(() => {

        setupAnimation();

    });

 

    onDestroy(() => {

        if (mainTimeline) {

            mainTimeline.kill();

        }

    });

I tried to replicate on stackblitz with sveltekit template but it's not working at all. I copied literally the same code (minus typescript) but it doesnt work. I have no idea where the issue is:

https://stackblitz.com/edit/sveltejs-kit-template-default-nlbcsr?file=src%2Froutes%2F%2Bpage.svelte

 Any help?

[Rodrigo]

Hi @nextwebd and welcome to the GSAP Forums!

 

I'm not 100% clear on what you're trying to achieve here.

 

Maybe this tutorial (check the demo and video) by @Carl could help:

https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/

 

Hopefully this helps, if not please be more specific about the issue you're having and what you're trying to achieve.

Happy Tweening!

[nextwebd]

12 hours ago, Rodrigo said:

Hi @nextwebd and welcome to the GSAP Forums!

 

I'm not 100% clear on what you're trying to achieve here.

 

Maybe this tutorial (check the demo and video) by @Carl could help:

https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/

 

Hopefully this helps, if not please be more specific about the issue you're having and what you're trying to achieve.

Happy Tweening!

Thank you for your reply. Yeah excuse my poor explanation. I've fixed the issue by  placing this:

   return gsap.to(chars, {

                            y: '-50%',

                            opacity: 0,

                            duration: 0.5,

                            ease: 'power2.in',

                            stagger: 0.03,

                            delay: 2

                        });

before  ".to({}, { duration: 3 })"

Basically my word would animate from y 100% to 0% and then again -50% until the next word comes into view.