yousoumar

Thanks for pointing out. I didn't know. I deleted it, changed my .eslitnrc parser to @typescript-eslint/parserand the error is gone.

Hi guys ! I installed @types/greensock and started using Gsap with TypeScript. Everything works fine, but the ScrollTo plugin is giving this eslint error (image attached). Someone knows something about it ? At least I want to be able to tell eslint to ignore this error. Thank you ! import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { gsap } from "gsap"; gsap.registerPlugin(ScrollToPlugin); export const headerInteractionHandler = () => { document.querySelector("header .logo").addEventListener("click", (e) => { e.preventDefault(); let element = <HTMLAnchorElement>e.currentTarget; gsap.to(window, { duration: 0.8, scrollTo: `${element.getAttribute("data-destination")}`, }); }); };

You saved my life @Cassie. I created that cool pinned timeline that I was about to abandon because of the number of my project cards. I tried doing a loop but it was with template string to inject data at some places and it didn't work. Thank you so much and have a great day !

Thank you so much @Cassie ! Tough the thing is, I wanna animate some elements inside each project card before going to the next one, don't know if it is possible. Here is the complete timeline for a project. timeline .from( ".project", { autoAlpha: 0, } ) .from(".project .image", { autoAlpha: 0, y: -100, }) .from(".project .description", { autoAlpha: 0, })

Thank you so much @Cassie ! Tough the thing is, I wanna animate some elements inside each project card before going to the next one, don't know if it is possible. Here is the complete timeline for a project. timeline .from( ".project", { autoAlpha: 0, } ) .from(".project .image", { autoAlpha: 0, y: -100, }) .from(".project .description", { autoAlpha: 0, })

Hi guys ! Hope you are doing fine ! I attached this codepen where I am pinning and animating some project cards. It is working fine, but I have way more projects and I was wondering if can avoid having to write the same pattern for all of them. Also, their number (the projects) may change frequently. Thanks for your time !

Thanks @GreenSock, you gave me some useful insights. Again thanks for GreenSock !

Hi guys ! I got this code for animating my video, it works fine on Safari, but on Chrome & Firefox, it jumps to some duration suddenly. I am missing something ? ref is an HTML element reference. I am using gsap in a Next app. Thanks ! export function useAnimOnScroll(ref) { let video = ref.current.querySelector("video")!; let tl = gsap.timeline({ scrollTrigger: { trigger: ref.current, scrub: true, start: "top top", end: "bottom top", markers: true, pin: true, }, }); tl.to(video, { currentTime: video.duration - 2, }); }

Thank you so much @OSUblake, your responses in the forum helped me many times and today with this one. Since it is my first time using ScrollTrigger with Next, I was not thinking of a possible syntax error at all. And thank you guys for this wonderful GreenSock.

I am having a hard time with ScrollTrigger in my Next app. Here is my code below. I am expecting markers and my animation to fire on scroll, but I get my animation on load and not my markers. import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import { useEffect, useRef } from "react"; export default function Services() { const servicesRef = useRef(); useEffect(() => { let tl = gsap.timeline({ ScrollTrigger: { trigger: servicesRef.current, markers: true, }, }); tl.to(servicesRef.current.querySelector("h1"), { color: "white", }); }, []); return ( <section className="services" ref={servicesRef}> <h1>Nos services</h1> </section> ); }