Jacot Sylvain

Ok found the solution with immediateRender: false,

Hello Everyone ! Trying to reproduce one of the animation from Aurelien Salomon, I'm blocked on one thing. Let's focus on the red block only (and full screen). https://codesandbox.io/s/festive-saha-60xed?file=/src/App.js:0-26 It is a react app The gsap animations are in the gsap-animations.js file and imported into MainBg.js The red block is supposed to come from the right when the page is refreshed AND go in the center of the page when it's "ScrollTriggered". Here a gif showing what behavior the red block should have : https://res.cloudinary.com/dnr3vs711/image/upload/v1605456169/gsapissue_gtadfn.gif Here an overview of the actual code regarding the red block : - The red block appears from the right side (included into a timeline) timeLine.to( FirstBlockRef.current, { duration: 1.3, visibility: "visible", translateX: "-30%", ease: Power2.easeOut, }, ">-1" ) then the redblock is supposed to move again with ScrollTrigger timeLine.fromTo( FirstBlockRef.current, { duration: 1.3, visibility: "visible", translateX: "-30%", ease: Power2.easeOut, }, { scrollTrigger: { trigger: FirstBlockRef.current, start: "bottom center", end: "bottom 100px", scrub: true, markers: true, }, translateX: "-50%", duration: 3, ease: Power2.easeOut, } ); }; If anyone knows could help on, it will be really appreciated Thank you so much, love ❤️

Thank you so much ! I'll try this. Once it's done, I'll post a codepen with my solution. You are very helpful

Hello guys ! How are today ? I wanted to try gsap with next.js but I'm struggling with useRef() hook. I try to put a ref on my <Bullet/> component (imported functional component) but I get this console error. I don't get how to use React.createRef() for an imported component or am I doing wrong with useRef ? p-s: I also tried firstbullet.current and firstbullet.current.focus into gsap function p-s: the same gsap function is working great on a simple div with a useRef (el => (div = el). Thank you so much ! Have a nice day.