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)

相关推荐
不会算法的小灰12 分钟前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
zero13_小葵司15 分钟前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing15 分钟前
前端框架篇——Vue&React篇
前端·javascript
面向星辰17 分钟前
css其他选择器(精细修饰)
前端·css
子兮曰21 分钟前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
宁雨桥23 分钟前
从视口到容器:CSS 容器查询完全指南
前端·css
wu~9701 小时前
web服务器有哪些?服务器和web服务器有什么区别
运维·服务器·前端
FIN66681 小时前
募投绘蓝图-昂瑞微的成长密码与未来布局
前端·后端·5g·云原生·信息与通信·射频工程·芯片
cooldream20091 小时前
深度解析中秋节HTML5动画的实现
前端·html·html5