极客教程GreenSock与ReactJS的滚动触发器
GreenSock动画平台 (GSAP) 是一个强大的JavaScript库，由前端开发人员用于创建强大的基于时间线的动画效果。GSAP用于使用JavaScript动画化任何可访问的元素。在本文中，我们将介绍如何在React.js中使用GSAP的ScrollTrigger。 ScrollTrigger 是来自 GreenSock 的免费插件，用于在进入或离开浏览器中定义的区域时应用动画效果。
语法
gsap.fromTo(target_element, { from_parameter }, { To_parameter, scrollTrigger: {
trigger: target_element
}})
在React项目中安装ScrollTrigger动画的步骤
要在您的React项目中实现ScrollTrigger动画，请按照以下步骤操作。
- 创建一个新的ReactJs项目。要创建一个新项目，请打开您的终端并执行以下命令：
npx create-react-app my-app
- 一旦项目创建完成，请输入以下命令将其输入项目文件夹：
cd my-app
- 必需的模块： 确保你在项目目录内，现在通过输入以下命令来安装GSAP库：
npm install gsap
- 将GSAP库导入到你的App.js文件中：
import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
项目结构
一旦基本的设置和安装完成，这将是项目的结构：
实现方法
- 创建一个新的功能组件，然后导入 GSAP 和 ScrollTrigger 并注册插件。注册插件可以确保它能够顺利工作，并防止在构建工具/打包工具中出现摇树问题。
- 我们将使用React的 useRef 来引用组件每次挂载时，一旦我们有了对对象的引用，就可以轻松地对其应用动画。我们将把动画代码放在 useEffect 中，这样组件只在浏览器加载时动画一次。
- 我们将使用 gsap.fromTo() 与scrollTrigger进行动画处理。
示例1： 在这个示例中，当滚动时，我们将尝试对元素的缩放进行动画处理。在代码中，缩放在“from参数”中设置为0，在“to参数”中设置为1.4。这意味着当元素进入视图时，元素的大小将从0更新为1.4，持续1秒钟。
- App.js
import React from 'react'
import './App.css'
import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const App = () => {
const ref = useRef();
useEffect(() => {
const el = ref.current;
gsap.fromTo(el, { scale: 0 }, {
scale: 1.4, duration: 1, scrollTrigger: {
trigger: el
}
})
}, [])
return (
<div className='App'>
<div style={{ height: '100vh' }}></div>
<img ref={ref}
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="" />
</div>
)
}
export default App;
- 运行步骤: 在终端中输入以下命令启动服务器：
npm start
输出： 现在打开浏览器并访问 http://localhost:3000/ ，你将看到以下输出：
示例2： 在这个示例中，我们将使用一个refs的数组来动画化多个组件。为此，有一个 addtoRefs 函数，它在滚动时将盒子组件的引用一个接一个地添加到数组中。
- App.js: 在App.js文件中编写JS代码
- App.css ：在App.css文件中编写CSS代码
import React from 'react'
import './App.css'
import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const App = () => {
const ref = useRef([]);
ref.current = [];
useEffect(() => {
ref.current.forEach((el) => {
gsap.fromTo(el, { autoAlpha: 0 }, {
autoAlpha: 1, left: 0,
duration: 0.5, scrollTrigger: {
trigger: el,
start: "top bottom-=100",
toggleActions: "play none none reverse"
}
})
})
}, [])
const addtoRefs = (el) => {
if (el && !ref.current.includes(el)) {
ref.current.push(el);
}
}
return (
<div className='App'>
<div className='divSpace'>Scroll Down</div>
<div className='box-container'>
<div ref={addtoRefs} className="box">box1</div>
<div ref={addtoRefs} className="box">box2</div>
<div ref={addtoRefs} className="box">box3</div>
<div ref={addtoRefs} className="box">box4</div>
<div ref={addtoRefs} className="box">box5</div>
<div ref={addtoRefs} className="box">box6</div>
<div ref={addtoRefs} className="box">box7</div>
</div>
</div>
)
}
export default App;
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
overflow-x: hidden;
}
.divSpace {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
.box-container {
min-height: 100vh;
width: 100vw;
display: grid;
justify-content: center;
align-items: center;
margin-bottom: 400px;
}
.box {
height: 50px;
width: 200px;
text-align: center;
position: relative;
left: -200px;
}
.box:nth-child(1) {
background-color: green;
}
.box:nth-child(2) {
background-color: crimson;
}
.box:nth-child(3) {
background-color: orange;
}
.box:nth-child(4) {
background-color: yellow;
}
.box:nth-child(5) {
background-color: green;
}
.box:nth-child(6) {
background-color: crimson;
}
.box:nth-child(7) {
background-color: orange;
}
- 运行步骤: 在终端中输入以下命令启动服务器:
npm start
输出： 现在打开您的浏览器并转到 http://localhost:3000/ ，您将看到以下输出：
