Transition

Our transitions are managed by our transition index.js, which is called in our Core.js file when the application runs.

This index contains a function that will help us add elements into our timeline, import libraries and make the necessary destroys.

Is this file modifiable? — YES

in

in: async (next, infos) => {
                // Preload images if not already loaded
                //check if preloadImages is already loaded
                await assetManager({
                    where: "transition",
                    types: ["preloadImages", "preloadLotties", "preloadVideos"],
                    debug: terraDebug,
                    libraryManager: Manager,
                    loadLibraries: async ({currentDOM}) => {
                        return await loadExtraAssets({
                            debug: terraDebug,
                            manager: Manager,
                            boostify: boostify,
                            currentDOM
                        });
                    },
                    progress: (percent) => {},
                });

                // Create a new GSAP timeline
                var tl = gsap.timeline({
                    onComplete: () => {
                        next;
                    },
                });

                // Add the In animation and other animations to the timeline
                tl.add(new In()).add("finishTransition");

                if (document.querySelector(".c--hero-a")) {
                    tl.add(new (Manager.getLibrary("heroA"))());
                }
                if (document.querySelector(".c--hero-b")) {
                    tl.add(new (Manager.getLibrary("heroB"))());
                }

                const elements = document.querySelectorAll(".js--moveItem");
                elements.forEach((element) => {
                    if (Manager.libraries.isElementInViewport({ el: element, debug: terraDebug })) {
                        tl.add(new MoveItem({ play: "instant", element: element }));
                    } else {
                        Manager.addInstance("MoveItem", new MoveItem({ play: "onscroll", element: element }));
                    }
                });
            },

The in of our animation is the part that executes when we change into a new page and the transition is made.

In this part we need to reload the asset manager so all of our preloads and libraries are available once again in our new page (remember that everything is destroyed on each page change).

After loading that, we can create a new timeline in our GSAP and add our elements.

Here we will need to add any elements that might need to be animated, such as heros or elements with a determinate class.

We know the heros will always be at the top of the page and on the viewport when the user loads the site, but for the rest of our elements we need to check, so if our element is in viewport we will add it to our timeline straight away, if it is not, we will add an instance of it to our manager so we can execute it later on.

out

out: (next, infos) => {
                // Destroy all instances provided in the array
                const elements = document.querySelectorAll(".js--moveItem");
                if (elements.length > 0) {
                    Manager.instances.MoveItem.forEach((instance) => {
                        instance.destroy();
                    });
                    Manager.cleanInstances("MoveItem");
                }

                // Create a new GSAP timeline for the 'out' transition
                var tl = gsap.timeline({
                    onComplete: async () => {
                        if (forceScroll) {
                            if (window.scrollY !== 0) {
                                await smoothScrollToTop();
                            }
                            await u_take_your_time(150);
                        }
                        next();
                    },
                });

                // Add the Out animation to the timeline
                tl.add(new Out());
            },

The out is what will execute when we are leaving the page. As per our common patterns, this is the place where we will destroy all of our instances and clean up the manager.

Here, we also need to create a new timeline for our transition animation.

Recap

Our transition needs all of the assets that were available for our first load of the page. To provide them, we need to use our index.js file and our asset manager. We also need to remember that everything we create on a new page load, we need to destroy when we go out.