Hakiba

Thank you for your answer, I try to use useLayoutEffect hook, it is maybe the cause of my issue. Also, I edited my post in order to add english language. And my problem is not really when I reload the page is more that reloading shows the issue that appear sometimes. For example, when I add an other timeline with an other trigger, and markers, they don't appear on the page, I have to reload the page in order to see it, but that breaks all animations that were working before... I don't know if I'm clear. Moreover this gsap code is working very well without react. And the code that I wrote in the first post isa minimal demo of the issue that I have.

Bonjour, J'ai voulu faire comme d'habitude sur un projet, c'est-à-dire utiliser GSAP et React mais impossible de faire fonctionner correctement le ScrollTrigger, je par malheur je reload la page, plus rien ne se comporte comme prévu, et certaines fois je suis obligé à l'inverse de reload pour faire apparaître les changements sur les markers. Hy, I did like I always do when I create a new react project with gsap, but this time I found issues to run properly ScrollTrigger. As you can see on the video if I reload the page, markers go wrong, and animation doesn't work as wanted. And sometimes I'm even obliged to reload the page in order to make appear markers. Voici un petit exemple du problème que j'ai pu rencontrer. (Sachant que hors React tout fonctionne parfaitement) Here a little example of the issue. (And good to know that without React this animation works, with the same code, perfectly) import React from "react"; import "./App.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import styled from "styled-components"; const Box = styled.div({ background: "palevioletred", height: "100vh", width: "100vw", }); const Box2 = styled.div({ background: "#149061", height: "100vh", width: "100vw", position: "relative", textAlign: "center", }); const Box3 = styled.div({ background: "black", height: "50vh", width: "50vw", position: "absolute", }); function App() { gsap.registerPlugin(ScrollTrigger); gsap.to(".box2", { x: 100, scrollTrigger: { markers: true, trigger: ".box2", start: "top center", end: "center center", scrub: true, }, }); return ( <div className="App"> <Box /> <Box2 className="box2"> <Box3 /> </Box2> </div> ); } export default App; Merci d'avance pour aide, Thomas Enregistrement de l’écran 2022-10-10 à 22.01.31.mov