import gsap from 'gsap';
  import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to('.box', {
    scrollTrigger: '.box', //当.box出现的viewport 中开始动画
    x: 500
});

let tl = gsap.timeline({
    // yes, we can add it to an entire timeline!
    scrollTrigger: {
        trigger: '.container',
        pin: true, // 在活动状态下固定触发元素。
        start: 'top top',
        end: '+=500',
        scrub: 1,
        snap: {
            snapTo: 'labels', // snap to the closest label in the timeline
            duration: { min: 0.2, max: 3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
            delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
            ease: 'power1.inOut' // the ease of the snap animation ("power3" by default)
        }
    }
});

  import ScrollToPlugin from 'gsap/ScrollToPlugin';

  gsap.to(window, { duration: 2, scrollTo: '.b', ease: 'power2' });

gsap.to(window, {
  duration: 2,
  scrollTo: { y: 300, autoKill: true, onAutoKill: myAutoKillFunction },
});

function myAutoKillFunction() {
  alert("autoKill");
}

<h1 id="myText">wait 1 second please</h1>
gsap.to("#myText", {duration: 2, text: "thank you for waiting", delay: 1});

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".flair--1", {
  type: "x",
  bounds: ".container"
});

Draggable.create(".flair--3b", {
  type: "rotation",
  inertia: true
});

Draggable.create(".flair--4b", {
  bounds: ".container",
  inertia: true
});