Simple SPA with Vanilla: Animations and exit animations.

[Liam_hyperisland]

Hi,

I got a school assignment where I'm supposed to create a SPA in vanilla JavaScript. I've added some animations to show off a bit, but honestly, things got much more difficult.

 

I have the following questions:

1. I've added a very simple GSAP animation - is it allowed the way I've done it?
2. I've been thinking for hours on how to add an exit animation (for example, having a text fade out). Do you have any suggestions to help me think along the right lines?

 

Simple example

 

Since routing is involved, I can't use CodePen and instead I'm using CodeSandbox. The code is very simple where you can only switch between the homepage and the about page. No CSS or such added.

Thank you

[Rodrigo]

Hi,

 

In this cases is about when to remove the content of the previous page and render the content of the next page. This is the key regardless if you're creating your own SPA library or using another (React, Vue, Svelte, etc.).

 

Here is how is explained in Vue, which I believe is the simplest way to explain and show how this works:

https://vuejs.org/guide/built-ins/transition.html#transition-modes

 

That is mostly a JS/DOM-rendering issue rather than a GSAP one.

 

From an academic and professional stand point I'd suggest you to just do the best possible work by focusing in what was asked for you to do. Either as a professor or boss of someone I'd prefer to have delivered what I asked, a vanilla routing system, once that is working as expected and there is 100% proof that is flawless, we can consider to add all the bells and whistles to it, if we saw fit to do so. Of course if your code is working as expected and you're covering all the possible scenarios (hash routing, url queries, dynamic routes, etc) then adding the animations to it would be nice.

 

Good luck with your assignment! 👍

Happy Tweening!

[Liam_hyperisland]

Hi,

I always get very good answers from you, thank you. My goal is to understand GSAP to the fullest, but it becomes difficult when one is good in GSAP but does not have a basic knowledge of the basic stuff. There are some tutorials that show, for example, how to use exit animations in Vue, React et cetera , but I think some of us don't really understand what's happening in depth.

 

For everyone who wants to understand how GSAP and Single Page Applications are connected, I solved the exit animations as follows:

In my example, I used a function to switch components, so to achieve an exit animation, I run an animation and then call the function that switches components using GSAP's onComplete.

 

if (window.location.pathname === "/" && destinationPath !== "/") {
        var tl = gsap.timeline();
        tl.to(".logo, #scroll-title", { 
            yPercent: 100, 
            opacity: 0,
            duration: 1.4,
            ease: "power2.out",
        }, "start");
        tl.to(".box", { 
            xPercent: 100, 
            opacity: 0,
            stagger: 0.1,
            duration: 1.4,
            ease: "power2.out",
            onComplete: transitionToPage
        }, "start");