[ScrollTo plugin gives eslint error when used with TypeScript]

41 minutes ago, GreenSock said:

You definitely shouldn’t be using the @types/greensock package - that was never from GreenSock (someone else made it) and it hasn’t been updated in 5+ years. 

 

The GSAP package itself comes with TypeScript definition files so you shouldn’t need to install anything else. 

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

[ScrollTo plugin gives eslint error when used with TypeScript]

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")}`,
    });
  });
};

[How can I optimise my timeline, to have less code to write ?]

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 !

[How can I optimise my timeline, to have less code to write ?]

14 minutes ago, Cassie said:

Hey there,

 

Sure thing, you can use a stagger and set a dynamic end point for the trigger. 
 

 

 

Hope this helps! ✨

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,
        })

 

[How can I optimise my timeline, to have less code to write ?]

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,
        })

 

[How can I optimise my timeline, to have less code to write ?]

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 !

See the Pen mdBNXob by yousoumar (@yousoumar) on CodePen

[Animating video time on scroll isn't smooth on Firefox & Chrome while it works for Safari]

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

[Animating video time on scroll isn't smooth on Firefox & Chrome while it works for Safari]

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,
  });
}

[ScrollTrigger not functioning with Next]

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.

[ScrollTrigger not functioning with Next]

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>
  );
}