Mr笔记

Appearance

GSAP ​

[TOC]

索引 ​

属性：

方法：

GSAP ​

配置项 ​

options【 ​

GSAP/Timeline ​

to()【 ​

gsap.to()：()，

  • ：``，

  • ：``，

  • 返回：

  • ：``，

  • 语法：

    • ****：
    • ****：

  • 特性：

    • ****：
    • ****：

  • 常见用途：

    • ****：

      js

    • ****：

      js

    • ****：

      js

  • 注意事项：

    • ****：
    • ****：

  • 示例：

    js

from()【 ​

fromTo()【 ​

GSAP ​

timeline()【 ​

registerEase()【 ​

registerPlugin()【 ​

Tween/Timeline ​

play()【 ​

pause()【 ​

resume()【 ​

seek()【 ​

reverse()【 ​

Timeline ​

add()【 ​

addLabel()【 ​

call()【 ​

remove()【 ​

removeLabel()【 ​

set()【 ​

Easing ​

Core ​

none ​
ts
// click to modify the underlined values
gsap.to(target, {
duration:2.5,
ease: "none"
y: -500
});

image-20250227113225645

power1 ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'power1.out',
  y: -500
})

power2 ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'power2.out',
  y: -500
})

image-20250227113438600

power3 ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'power3.out',
  y: -500
})

image-20250227113454283

power4 ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'power4.out',
  y: -500
})

image-20250227113509026

back ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'back.out(1.7)',
  y: -250
})

image-20250227113539802

bounce ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'bounce.out',
  y: -250
})

image-20250227113555644

circ ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'circ.out',
  y: -250
})

image-20250227113615497

elastic ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'elastic.out(1,0.3)',
  y: -250
})

image-20250227113634712

expo ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'expo.out',
  y: -250
})

image-20250227113650293

sine ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'sine.out',
  y: -250
})

image-20250227113712144

steps ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'steps(12)',
  y: -500
})

image-20250227113726797

Extra ​

rough ​
ts
// click to modify the underlined values
gsap.to(target, {
duration:2.5,
ease: "rough({
template:none.out,
strength: 1,
points:20,
taper:none,
randomize:true,
clamp:false
})",
y: -250
});

image-20250227114009296

slow ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'slow(0.7,0.7,false)',
  y: -500
})

image-20250227114026079

expoScale ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: 'expoScale(0.5,7,none)',
  y: -500
})

image-20250227114041137

CustomEase ​
ts
// click to modify the underlined values
gsap.to(target, {
  duration: 2.5,
  ease: CustomEase.create(
    'custom',
    'M0,0 C0,0 0.1405,0.03363 0.185,0.04842 0.22428,0.06147 0.29873,0.09128 0.335,0.10929 0.37144,0.12739 0.4418,0.16891 0.475,0.19252 0.50828,0.21619 0.57051,0.26862 0.6,0.29782 0.63225,0.32975 0.69247,0.40053 0.72,0.43744 0.74761,0.47444 0.79673,0.55185 0.82,0.59278 0.8459,0.63833 0.89312,0.73435 0.915,0.7836 0.93835,0.83617 1,1 1,1 '
  ),
  y: -500
})

image-20250227114100097

ScrollTrigger ​

ts
gsap.to(".element", {
  scrollTrigger: {
    trigger: ".container",  // 触发器元素
    start: "top center",    // 动画开始位置（触发器相对于视口的位置）
    end: "bottom top",      // 动画结束位置
    scrub: true,            // 动画随滚动条拖动
    markers: true,          // 显示调试标记
    toggleClass: "active",  // 在触发器激活时添加类
    onEnter: () => {},      // 进入触发器区域回调
    onLeaveBack: () => {}   // 滚动回顶部回调
  },
  x: 500
});

Flip ​