Occasionally, animations run while at other times, they do not. I am unable to discern how to debug the issue

[andresclua]

Hey, thanks for implementing this library!, I have been working with this library for the past 6 months. I'm using Astro + Swup. On Page load animations works perfect but problems start to show up when I install jsPlugin.

// Home
    {
        from: '(.*)',
        to: '/',
        in: async (next, infos) => {
            await preloadImages('img'); // preload new images using imagesloaded.
            await takeYourTime(200); // set timeout just to be "safe"
            var tl = gsap.timeline({
                onComplete: next
            })
            tl.add(new In()) // in moves c--transition ONLY
            tl.add(new HomeTransition()) // custom transition
        },
        out: (next, infos) => {
            var tl = gsap.timeline({
                onComplete: next
            })
            if (document.getElementById('burger').className.match('b--burger-a--is-active')) {
                tl.add(letsHideTheNavbar())
            }
            tl.add(new Out()) // in moves c--transition ONLY

        }
    },

This is how HomeTransition Looks like

import gsap from 'gsap';
import { SplitText } from 'gsap/SplitText';
gsap.registerPlugin(SplitText)

class HomeTransition{
    constructor(){
        this.DOM = {
            // job position & developer name 
            jobposition:document.querySelector('.js--job_position'),
            developerName : document.querySelector('.js--name'),

            //stripes
            stripe:document.querySelectorAll('.c--stripes-a__item'),
            stripeArtwork:document.querySelector('.c--stripes-a__artwork'),

            //footer
            footerTitle: document.querySelector('.c--footer-a__title'),
            footerSubtitle: document.querySelector('.c--footer-a__subtitle'),
        }
        return this.init()
    }
    init(){
        console.log('test')

        var tl = gsap.timeline({
            defaults:{
                ease: "power2.out",
                duration:.6
            }
        })
        tl.from(new SplitText(this.DOM.jobposition, {type: "words,chars"}).chars,{
            stagger:0.014,
            opacity:0,
            y:55,
            scale:0.8,
            skewX:24,
        })
        tl.from(new SplitText(this.DOM.developerName, {type: "words,chars"}).chars,{
            stagger:0.014,
            opacity:0,
            y:55,
            scale:0.8,
            skewX:24,
        },"<25%")
        tl.from(this.DOM.stripe,{
            // duration:1,
            opacity:0,
            x:"-100%",          
            stagger: (index, target, list)=> {
                return index * 0.25;
            }
        },"<25%")
        tl.from(this.DOM.stripeArtwork,{
            opacity:0,
            scale:0.3
        })
        tl.from(this.DOM.footerTitle,{
            opacity:0,
        })
        tl.from(this.DOM.footerSubtitle,{
            opacity:0,
        },"-=.6")
        return tl
    }
}
export default HomeTransition;

It happen that sometimes/randomly splitText do not get fired. It happens on WorkIndexTransition.js too. Can't even make a document.querySelectorAll.

https://codesandbox.io/p/github/andresclua/portfolio-frontend-2024/main?workspaceId=138605fe-a185-46bd-9550-479e93c08fe6

I just drop this codesandbox, would love some feedback.

[andresclua]

it was a gsap set, fixed.

[hirasso]

Glad that you solved it!