初学gsap的记录

1. gsap的文档

官网地址
react的gsap文档地址
vue或js的文档地址
gsap官方vue demo的地址

2. gsap常见的文字动画demo

方法一：
配合css使用
把id为text的css设置
transform: translateY(20);
opacity:0

 gsap.to('#text', {
      y: 0,
      opacity: 1,
      ease: 'power1.inOut'
    })

方法二：
直接用gsap完成全部操作

 gsap.fromTo(
      '.para',
      {
        opacity: 0,
        y: 20
      },
      {
        y: 0,
        opacity: 1,
        delay: 1, //延迟一秒触发
        stagger: 0.1 //一个段落一个段落的触发动画
      }
    )

3.gsap常见的盒子移动demo

 gsap.to('#blue-box', {
      x: 300, //x轴移动300
      repeat:-1 ,//-1==无限重复
      yoyo:true ,//哟哟球来回滚动
      rotate:360,//360度旋转
      duration:2,//2秒完成动画
      ease:'',//增加动画效果
    })

4.gsap 多个盒子 同样的动画 错开播放

gsap.to('.stagger-box', {
      y: 250,
      rotate: 360,
      repeat: -1,
      yoyo: true,
      // stagger:0.5, //一个一个动
      stagger: {
        amount: 1.5,
        grid: [2, 1],
        axis: 'y',
        ease: 'circ.inOut',
        from:'center',//从中间开始 动
      }
    })

5. gsap 滚动到视窗再播放动画

注意引入滚动插件 ScrollTrigger

import { ScrollTrigger } from "gsap/all"
gsap.registerPlugin(ScrollTrigger);
gsap.to('#box', {
        x: 150 , 
        rotation: 360,
        borderRadius: '100%',
        scale: 1.5,
        scrollTrigger: {
          trigger: '#box', //滚动到id为box的盒子再加载动画
          start: 'bottom bottom', //出现在视图底部的时候再加载
          end: 'top 20%', //到视图 上面 和上面20%的时候结束动画
          scrub: true //顺滑的动画
        },
        ease: 'power1.inOut'
      })

6.简单的封装一下滚动插件 防止每次使用都要引入ScrollTrigger

设置的scrollTrigger 为每次进入视窗都会重新加载动画

import { ScrollTrigger } from "gsap/all"
gsap.registerPlugin(ScrollTrigger);

export const animateWithGsap = (target, animationProps, scrollProps) => {
  gsap.to(target, {
    ...animationProps,
    scrollTrigger: {
      trigger: target,
      toggleActions: 'restart reverse restart reverse',
      start: 'top 85%',
      ...scrollProps,
    }
  })
}