😀[GSAP] ví dụ sử dụng gsap js chuyển sang gsap typescript (ok)

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".text").forEach(el => {
  // Set initial state
  gsap.set(el, { opacity: 0, y: 50 });
  // Animate each .text
  gsap.fromTo(el,
    { opacity: 0, y: 50 },
    {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "back.out(1.7)",
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
        toggleActions: "play none none reverse",
        markers: true
      }
    }
  );
});

src\test.ts

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray<HTMLElement>(".text").forEach(el => {
  // Set initial state
  gsap.set(el, { opacity: 0, y: 50 });
  // Animate each .text
  gsap.fromTo(el,
    { opacity: 0, y: 50 },
    {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "back.out(1.7)",
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
        toggleActions: "play none none reverse",
        markers: true
      }
    }
  );
});

Last updated