Jump to content
Search Community

Deewens

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Deewens

  1. Ok, I understand now ! Many thanks ! It is working as excepted now. Sorry, I forked the sandebox with the solution : https://codesandbox.io/s/scrolltrigger-issue-with-react-solved-7sjt0?file=/src/NewsSection.tsx I will edit my first message with the first code of the issue when I can !
  2. I am not sure to understand how to solve this "most common ScrollTrigger mistake". I have to put all the ScrollTrigger object directly in gsap.timeline as : foreach { gsap.timeline({scrollTriger: { blabla }.from(element, {blabla}) } Right? Anyway, I tried to use the "batch" function : useEffect(() => { ScrollTrigger.batch(newsCardRefs.current, { interval: 1, onEnter: (batch: Element[]) => gsap.from(batch, { opacity: 0, y: 75 }) }); }, []); But again, it's not working. I don't know if it is because React ref or something else. I updated the code sandbox accordignly. And I followed this tutorial : https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
  3. I could not put in on codepen (the import does not work for react, material ui etc and it's weird with Typescript) so I put it on CodeSandbox. I hope it'll be right. https://codesandbox.io/s/scrolltrigger-issue-with-react-sj99k Thanks for your message !
  4. Hello, I am trying to use GSAP (which is really great) for my React App. But I can't figure out what I am doing wrong. I would like something like this : https://gyazo.com/faf842677cbc0c9830f3050732144903 When I am refreshing the page without coming from the top (and without scrolling), the animation seems to work: https://gyazo.com/92abad5f15b65134da72b6c6a4d4c684 But, I am getting something like that when I am scrolling from the top : https://gyazo.com/7de4c15cdbf52cda50f51cbbcf8b4cea I can't find what I am doing wrong, and I read a lot of tutorial. Here is my code (btw I am using Material-UI and Typescript, and Typescript is not happy when I give an useRef element.current to gsap target) : Codesandbox : https://codesandbox.io/s/scrolltrigger-issue-with-react-sj99k Thanks ! I hope I will find a solution and someone can help me, this library seems really awesome ! (I can't paste a codepen, because my project is separated in multiple component, but I can rewrite the part with GSAP just for this subject if you need it !)
×
×
  • Create New...