gsap使用教程

gsap

GSAP 是一个强大的 JavaScript 工具集，让大家秒变动画大佬。构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象… JavaScript 可以触摸的任何东西！GSAP 的ScrollTriggeropen in new window插件让您可以用最少的代码创建滚动动画。

安装引入

1. 安装

   // npm、pnpm安装
   npm install gsap
   // yarn安装
   yarn add gsap
   

2. 引入

   import gsap from "gsap";
   

创建动画

• 语法 gsap.Methods(target,variables)

  • Methods：动画方式
  • target：参与动画的元素
  • variables：参数配置

• 动画方式：.to()、.from()、.fromTo()、.set()

  • gsap.to() ：最常使用的，元素从当前状态到定义状态的动画

    gsap.to(".box", {
            x: 200 })
    

    

  • gsap.from() ：与 gsap.to() 相反，元素从定义状态到初始状态的动画

    gsap.from(".box", {
            x: 200 })
    

    

  • gsap.fromTo() ：定义开始动画和结束动画

    gsap.fromTo(".box", {
            x: -40, backgroundColor: 'blue', }, {
            x: 40, backgroundColor: 'green' });
    

    

  • gsap.set() ：直接到定义的结束状态、无动画

    gsap.set(".box", {
            x: 200 })
    

    

变量参数

• target获取

  • 使用选择器或者获取的dom元素，甚至一个包含多个dom元素数组

    gsap.to(".box",{
           x:20});
    
    let box = document.querySelector(".box");
    gsap.to(box,{
           x:20});
    
    let box1 = document.querySelector(".box1");
    let box2 = document.querySelector(".box2");
    gsap.to([box1,box2],{
           x:200});
    

  • css属性（驼峰写法）

    gsap.to(".box", {
            
      duration: 2,
      backgroundColor: '#8d3dae',
    });
    

    GSAP属性和css动画属性对应表

    
    特殊属性