GSAP解锁动画的无限可能

前言

最近在看一些文章和官网的时候,都能看到一些酷炫的动画效果。就发现了GSAP这个好东西,可以说GSAP提升动画Level,减低动画难度。接下来看一下实现的GSAP常见动画。文章后面有仓库地址和在线观看地址。

不知道GSAP可以先去了解一下,就不写教学了。

GSAP官网 :Homepage | GSAP

正文

文字揭示效果

原理:将color设置为底色,揭示高亮的部分使用background-imagelinear-gradient实现,揭示过的部分也是使用background-imagelinear-gradient,再根据滚动距离设置background-position就可以了;还有最重要的一点要使用行内元素。

行内元素、块元素linear-gradient区别是有区别的,可以看出块元素linear-gradient会在整个元素背景上只出现一次,而行内元素不是这样的。

我们可以得到以下样式,接下来只要根据滚动确认distance就行了。

使用GSAP,根据滚动计算distance

tsx 复制代码
import React, { useEffect, useMemo, useRef, useState } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/all';
import { useGSAP } from '@gsap/react';
import { Box, Text, Title } from './style';

gsap.registerPlugin(ScrollTrigger);

export default function Index() {
  const ALL_SCROLL_DISTANCE = 1200;
  const container = useRef(null);
  const text = useRef<HTMLDivElement>(null);
  const box = useRef(null);
  const sumLen = useRef(0);
  const [distance, setDistance] = useState(0);

  useGSAP(() => {
    if (text.current === null) {
      return;
    }
    const lineHeight: string = window.getComputedStyle(text.current).lineHeight;
    const textHeight = text.current.offsetHeight;
    const lines = Math.round(textHeight / Number(lineHeight.split('px')[0]));
    sumLen.current = lines * text.current.offsetWidth;

    const tl = gsap.timeline({
      scrollTrigger: {
        scroller: container.current,
        trigger: box.current,
        scrub: 2,
        pin: true,
        end: `+=${ALL_SCROLL_DISTANCE}`,
        onUpdate: self => {
          //前一半的进度
          const progress = self.progress;
          //设置距离
          setDistance((sumLen.current / ALL_SCROLL_DISTANCE) * progress * 100 * (ALL_SCROLL_DISTANCE / 100) * 2);
        },
      },
    });

    tl.to(box.current, {
      duration: ALL_SCROLL_DISTANCE / 2 / 1000, // 持续时间为总滚动距离的一半
      ease: 'none',
    });

    //后一半的动画,将整个文字高亮
    tl.to(box.current, {
      color: '#fff',
      duration: ALL_SCROLL_DISTANCE / 2 / 1000,
      ease: 'none',
    });
  }, []);

  return (
    <div
      ref={container}
      style={{
        height: '100vh',
        overflowY: 'auto',
        overflowX: 'hidden',
        backgroundColor: '#333',
      }}
    >
      <Title>
        <h2>down roll</h2>
      </Title>
      <Box ref={box}>
        <div>
          <Text
            ref={text}
            distance={distance}
            style={{
              wordBreak: 'break-all',
            }}
          >
            The rapid advancement of technology has transformed our daily lives in unprecedented ways. From smartphones
            to artificial intelligence, these innovations have made communication faster, work more efficient, and
            information more accessible.
          </Text>
        </div>
      </Box>

      <Title>
        <h2>End</h2>
      </Title>
    </div>
  );
}

滚动渐入效果

原理:使用GSAP根据滚动,将图片和文字移动一段距离

tsx 复制代码
 useGSAP(() => {
    gsap.to(title.current, {
      opacity: 0,
      scrollTrigger: {
        scroller: container.current,
        trigger: title.current,
        scrub: 2,
        // markers: true,
        start: 'top 180', // 动画开始位置
        end: 'bottom top',
      },
    });

    const leftList = [img1Ref.current, img3Ref.current];
    leftList.forEach(element => {
      gsap.from(element, {
        x: -50,
        scrollTrigger: {
          scroller: container.current,
          trigger: element,
          scrub: 1,
          // markers: true,
          start: 'top bottom', // 动画开始位置
          end: 'bottom bottom-=200',
        },
      });
    });

    const rightList = [img2Ref.current, img4Ref.current];

    rightList.forEach(element => {
      gsap.from(element, {
        x: 50,
        scrollTrigger: {
          scroller: container.current,
          trigger: element,
          scrub: 1,
          // markers: true,
          start: 'top bottom', // 动画开始位置
          end: 'bottom bottom-=200',
        },
      });
    });

    const elements = [p1Ref.current, p2Ref.current, p3Ref.current, p4Ref.current];
    elements.forEach(element => {
      gsap.from(element, {
        y: 60,
        opacity: 0,
        scrollTrigger: {
          scroller: container.current, // 如果你有自定义滚动容器
          trigger: element,
          scrub: 1,
          // markers: true,
          start: 'top bottom', // 动画开始位置
          end: 'bottom bottom-=200', // 动画结束位置
        },
      });
    });
  }, []);

在竖直滚动中横向滚动

原理:使用GSAPpin属性,计算出在滚动时需要平移的距离

tsx 复制代码
useGSAP(() => {
    if (box.current === null) {
      return;
    }
    gsap.to(box.current, {
      x: -(box.current.offsetWidth - window.innerWidth),
      scrollTrigger: {
        scroller: container.current,
        trigger: box.current,
        scrub: 2,
        // markers: true,
        end: '+=800',
        pin: true,
      },
    });
  }, []);

结语

感兴趣的可以去试试

仓库地址 :function-realization: 实现一些有趣的功能 (gitee.com)

在线观看地址: 卸任的博客 (hewkq.top)

相关推荐
Mintopia7 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙7 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院11 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记12 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92114 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada14 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia15 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj15 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人21 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
用户7847215099121 分钟前
Zustand源码解读(更新中)
react.js