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.

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.

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.

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.