Leaderboard

The useGSAP hook has a dependency for at least React 16, but it doesn't use/install React 16: "dependencies": { "gsap": "^3.12.5", "react": ">=16" }, If you already have React 18 installing the @gsap/react package won't change a thing and won't install another version of React. I just tested this on a demo here on my local machine using the latest version of Next without any issues. We only encountered some issues while importing the @gsap/react package from esm.sh, which solves by doing this: import React from "https://esm.sh/react@18.3.1"; import ReactDOM from "https://esm.sh/react-dom@18.3.1"; import gsap from "https://esm.sh/gsap"; import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1"; We'll update the dependencies on the hook to be at least version 17 of React. Finally it would be super helpful if you could create a minimal demo that reproduces this error. Happy Tweening!

Mhh... Why are you using intersection observer for something that can be done with ScrollTrigger? I think you are overcomplicating this quite a bit. If I was you I'd create an extra prop for ScrollTrigger and if that prop has a ScrollTrigger configuration, you just need to check if is not falsy, instead of using just SplitText use ScrollTrigger to handle when the animation plays, something like this: https://codepen.io/GreenSock/pen/abxMRgp I updated the demo I posted before so it uses ScrollTrigger https://stackblitz.com/edit/nuxt-starter-vzsxyp?file=app.vue The only detail is that this check is not needed with ScrollTrigger: completed && tween.progress(1); Hopefully this helps. Happy Tweening!

Hello Lilian. You can use ScrollTrigger's rich callback system to trigger any function you'd like. https://codepen.io/GreenSock/pen/qBdeVJY Figuring out the logic related to what you need to call and how to best call it, would be yours to figure out though, as this free support forum can not give support for any given 3rd party library. Below is a VERY dirty implementation just to give you an idea on where to start. I set up a boolean variable and only if that variable (triggered) is false, I start the rendering loop logic of matter.js in ScrollTrigger's onEnter callback. Keep in mind, this is just to give you an idea - how to make it start in its initial expected layout from where the words are supposed to fall e.g. would be more of a matter of matter.js (yeah, that pun was intended ?) which as I said, you'd need to figure out yourself with regard to that library. Here are some notes on your use of ScrollTrigger though: if you want to use markers to help debugging, it's markers- not marker as you wrote the element you want to use as a trigger does not have any height, so you will likely run into problems if you want to also trigger things onLeave or onEnterBack (or even try to scrub the animation - which again would be a case of finding out how to update the animation within matter.js first) even if that element had a height, I would reconsider your choice of the end value for the ScrollTrigger - because if it e.g. layout wise was the same as that green section, the end would trigger at the same time as the start - because its bottom would already be hitting the bottom of the window First things first I would make sure that everything is in its absolute correct place layout wise before starting to implement ScrollTrigger in any way; to me your layout looks kind of odd with e.g. the body being visible when you scroll down - you appear to be using a viewport-width value for its height e.g. and I'm not sure whether that is intended or not - a proper layout (via HTML markup and CSS styling) is one of the most important things you will need when animating / triggering things on scroll Anyway, I hope this will be helpful in some way. https://codepen.io/akapowl/pen/KKrxdZa