[(React.js) Animations not working on iOS.]

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.

[(React.js) Animations not working on iOS.]

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.

[(React.js) Refactor Timeline simple text animation.]

Thank you for the quick response @ZachSaucier

 

I was able to achieve the same behavior with GSAP's TextPlugin with the following code:

 

import { TextPlugin } from 'gsap/dist/TextPlugin';

gsap.registerPlugin(TextPlugin);

gsap.to(element.current, {
	duration: 1,
	text: 'Gustavo',
	ease: 'none'
});

 

Now that the basics are clear I'll focus on making the animation more fluid / behave the way I want.

 

Thanks.

[(React.js) Refactor Timeline simple text animation.]

Hi, I'm new to GreenSock and so far I'm loving it, however I'm still confused on what would the best practices for some scenarios.

 

I have the following code:

 

import React, { useRef, useState } from 'react';
import gsap from 'gsap';

export const Example = () => {
    const [text, setText] = useState('wow');
    const element = useRef(null);

    const onMouseOverHandler = () => {

        const tl = new gsap.timeline();

        tl.to(element.current, {
            duration: 0.1,
            call: () => {
                setText('G');
            }
        })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gu');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gus');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gust');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gusta');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gusta');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gustav');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gustavo');
                }
            });
    };

    return (
        <div ref={element} onMouseOver={onMouseOverHandler}>
            {text}
        </div>

    );
};

Notice the repeated .to's I'm using just to add a new letter.

If I wanted to increase the text content it would end up with even more repetitions.

 

Is there any other more elegant way of doing what I'm trying to do here?

 

Thanks.