(React.js) Animations not working on iOS.

[Gustavo Máximo]

Hi, I'm new to GreenSock and I'm having some problems with the animations on iOS, here's the sample code:

 

    useEffect(() => {
        gsap.from(titleRef.current, {
            delay: 0.250,
            duration: 0.5,
            opacity: 0,
            x: 0,
            y: -100
        });
        gsap.fromTo(imagesRefs.map(e => e.current), {
            duration: 0.5,
            opacity: 0,
            x: 0,
            y: -100,
        }, {
            delay: 0.5,
            duration: 0.5,
            opacity: 1,
            x: 0,
            y: 0,
            stagger: {
                amount: 0.5
            }
        });
        gsap.from(detailsRefs.map(e => e.current), {
            delay: 1.2,
            duration: 0.5,
            opacity: 0,
            x: 0,
            y: -100,
            stagger: {
                amount: 0.5
            }
        });
    }, [imagesRefs.length]);

A simple code that runs when the after some images are loaded. However it breaks completely on iOS.

 

Video Example 1: 

 

 

Video Example 2: 

 

Here's the application link for real time testing:

 

http://gustavomaximo.dev/

 

The code posted above (and shown in the videos) is from a "/projects" page.

 

Example:

 

https://gustavomaximo.dev/projects/maxs-node-blog

 

The specific code that runs in these pages and contains the snippet posted at the beginning of this post can be found at:

https://github.com/GoldenMaximo/GoldenMaximo-Frontend/blob/main/src/pages/project/[slug].js

 

Any help or insight would be highly appreciated. Thanks.

[Gustavo Máximo]

Turns out it wasn't caused by GSAP. It was a recurring listener that stayed active throughout different pages.

 

Mods delete this post if you want.

[GreenSock]

Thanks for letting us know. It's actually a good thing to leave here just in case someone else runs into a similar problem. 

 

Happy tweening!