GSAP animation library

gsap Animation library

GSAP file

First, import. gsap Animation library
npm i gsap -S
After installation, reference in the project
import gsap from "gsap"

Normal page usage

gsap.to(' Class name ',{
     Animation properties })
// We can also use timeline to write animation 
// Create a timeline  , Then use chain grammar , Students who have done video clips may understand better 
var tl = gsap.timeline();
tl.to(".box1", {
     rotation: 27, x: 100, duration: 10 }).to(".box1", {
     rotation: 27, x: 100, duration: 10 });

THREE Use of interface

//cube Is instantiated 3d goods  gsap.to The reaction is the result of the object 
let tl = gsap.timeline()
let ani = tl.to(cube.position, {
    
    x: 500, duration: 3,
    ease: "power1.inOut",
    yoyo: true,
    repeat: -1,
    delay: 2,
    onComplete: () => {
     console.log(1); },
    onStart: () => {
    
        console.log(' Here we go ');
    }
})
// Double click screen monitor 
window.addEventListener('dblclick', () => {
    
    console.log(ani.isActive());// Whether it is in motion 
    if (ani.isActive()) {
    
        ani.pause() // Animation stops 
    } else {
    
        ani.resume()// Animation recovery 
    }
})

ease It's speed
repeat Repeat the number -1 Infinite loop
yoyo Back and forth movement
delay Delayed motion
onComplete It is a callback function done when it is finished
onStart It is a callback function done at the beginning