Jump to content


  • Posts

  • Joined

  • Last visited

TomS0's Achievements

  1. Hey everyone, onEnter only seems to fire when scrolling down, not strictly when it has entered the viewport (based on the start, end params) as you would expect. I have used onUpdate to get around this but for performance reasons I would like to avoid it. Do you have any ideas what I'm doing wrong here? Thanks, Tom
  2. Hey everyone, I've been doing some searching around the forum about doing complex timeline based animations with React. I have found some answers that I don't think are up to date as they don't currently work. For example: Applying `const timeline = gsap.timeline()` with `useEffect()` will reset the timeline when the component re-renders as it redefines the `const`. I have decided to go for `const timeline = useMemo(() => gsap.timeline({ paused: true }), [])`. I'm unsure if this is best practice, but it isn't giving me any problems really. The one that is giving me a problem however is const imageRef = useRef(null) const [hovered, setHovered] = useState(false) const timeline = useMemo(() => gsap.timeline({ paused: true }), []) useEffect(() => { timeline .fromTo( imageRef.current, { clipPath: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)', rotate: -10, y: 20, autoAlpha: 0, }, { clipPath: 'polygon(0% 65%, 100% 35%, 100% 100%, 0% 100%)', rotate: 0, y: 5, autoAlpha: 0.4, duration: 0.15, } ) .to(imageRef.current, { clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', rotate: 5, autoAlpha: 1, y: 0, }) return () => { timeline.kill() } }, [timeline]) function onEnter() { setHovered(true) timeline.play() } function onLeave() { setHovered(false) timeline.reverse() } Because React in development mode invokes a double render, when you fire `onEnter` the timeline skips, this doesn't happen in the deployed site because of the lack of double render. But I'm unsure exactly what it's happening. Is `useMemo` the incorrect hook to be using for this use case? I tried doing `useRef` then assigning gsap to `useRef.current` but that completely stopped the page from rendering giving a timeout. Thanks, Tom PS: Please release an official React module, I will love you forever!