😀[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
}
}
);
});
PreviousTypescript Gheatsheet GitNextstagger (lảo đảo) xuất hiện dần dần từng block, bạn hiểu block stagger và group stagger (ok)
Last updated