xyzmoonlight

So i tried to create simple animation leveraging requestAnimationFrame and useGsap , it works well. But i have tons of warning after move to another page like this, even the target ".something" inside the scope. this is the minimal demo https://stackblitz.com/edit/stackblitz-starters-rmxkhy?file=app%2Fpage.tsx Thank you

Thank you, i just add the minimal demo but using stackblitz

you right, i need to edit my question [UPDATE]: QUESTION UPDATED

I tried creating a simple animation for each slide whenever the slider changes. For example, just adding y: 100px to it. However, when I added GSAP onSlideChange, it work just for the first time and the other slides didn't animate; instead, they got stuck at y: 100px. demo: https://stackblitz.com/edit/swiper-react-saklce?file=src%2FApp.js <Swiper slidesPerView={1} onSlideChange={e => { gsap.to(".swiper-slide-active .hero-cta", { y: "100%" }) }} loop > <SwiperSlide> <button className="hero-cta">slide 1</button </SwiperSlide> <SwiperSlide> <button className="hero-cta">slide 1</button </SwiperSlide> </Swiper> my expected, each button get animated everytime the slide change, thanks in advance

I've been experimenting with GSAP for the past few weeks using next, and I've been trying to use "pin" with "scrollTrigger." However, it seems like I'm getting extra white space every time I use "pin" with the scroll trigger. Is there something wrong with my code? first, I create two refs. const animatedPath = useRef(null) const svgref = useRef(null) and second I use `useLayoutEffect` for register scroll trigger plugin and define gasp animation useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: svgref.current, start: "top top", end: "bottom 100", scrub: true, markers: true, pin: true } }) gsap.set(animatedPath.current, { strokeDasharray: 471.2, strokeDashoffset: 471.2, }) tl.to(animatedPath.current, { strokeDashoffset: 0 }) }, []) after that, i create svg with circle inside it <section style={{ height: "200vh" }}> <svg ref={svgref} style={{ width: "400px", height: "400px" }} xmlns="http://www.w3.org/2000/svg"> <circle cx={200} cy={200} r={75} fill="none" stroke="black" strokeWidth={10} ref={animatedPath} /> </svg> </section> The result shows that the `pin-spacer` class has a large padding/whitespace, and the animation doesn't start properly. full link https://codesandbox.io/p/sandbox/sad-lalande-q7c578?file=%2Fapp%2Fglobals.css%3A1%2C1 Thanks in advance!