- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
gsap
——海子 https://github.com/greensock/GSAP https://gsap.com/ GSAP 是一个与框架无关的JavaScript 动画库，可将开发人员变成动画超级英雄。 GSAP 的ScrollTrigger插件以最少的代码提供令人惊叹的基于滚动的动画。 gsap.matchMedia()使构建响应式、易于访问的动画变得轻而易举。 GSAP 解决了无数浏览器不一致的问题；你的动画就可以了。从本质上讲，GSAP 是一个高速属性操纵器，可以随着时间的推移以极高的精度更新值。它比 jQuery 快 20 倍！ CDN： <script src="https://cdn.jsdelivr.net/npm/<em>gsap</em>@3.12/dist/<em>gsap</em>.min.js"></script> 安装： npm install gsap 例如： import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin
54210编辑于 2024-11-24 - 来自专栏青年码农
【GSAP3教程】初次上手GSAP3
国内虽然有GSAP中文网，但是文档还是2.x版本，如果使用最新的版本（3.x），可能需要去官网了解。官方建议使用GSAP3，因为GSAP 3使用起来更容易，而且有很多改进。 它向后兼容大多数GSAP 2功能，但有些部分可能需要更新才能正常工作。下面我们就先说说和GSAP2版本的区别. 版本对比 在2.x版本中，GSAP有四个模块。 安装及引入 如果项目使用依赖包引入方式，我们可以用npm或者yarn # npm npm i gsap --save # yarn yarn add gsap # 引入 import { gsap } 使用GSAP创建动画很简单。 还有另外两种方法可以快速创建一个动画gsap.from()及gsap.fromto()，包括这三种下一篇我们详细讲解。
2.3K1410发布于 2021-08-18 - 来自专栏前端大合集
GSAP基础学习
TimeLines学习 学习资源来源官网,翻译来自有道词典 Getting Started with GSAP - continued - Learning Center - GreenSock TimeLines 基本演示 let t1 = gsap.timeline() t1.to('.one',{x:600,duration:2}) // 这个元素的动画时长为2秒 t1.to('.two',{x t1.to('.three', { x: 600, duration: 1 }, "+=1") 官网也提供了一个调试面板可以更好地理解位置参数对动画的影响 Getting Started with GSAP let t1 = gsap.timeline({ defaults: { duration: 1 ,yoyo:true,repeat:-1} }) t1.to('.one', { x: 600 }) 还有一些 这里列出常用的 详细可以见官网 let t1 = gsap.to('.green',{duration:6,rotation:360,x:600}) // 获取按钮元素 // 播放
63210编辑于 2024-07-29 - 来自专栏WindCoder
GSAP动画效果总结页
记录下最近常用的以及自己设置出来的效果，免得日后需要时还要去项目里翻。 放大 TweenLite.from($("#titile"), 1, {scale:0.0, opacity:0.0}); TweenLite.to($("#titile"), 1, {scale:1.0, opacity:1.0}); 缩小 TweenLite.from($("#titile"), 1, {scale:2.0, opacity:2.3}); TweenLite.to($("#titile"), 1, {scale:1
1.1K10发布于 2018-09-20 - 来自专栏前端漫步
使用GSAP创建惊艳的动画效果(一)
GSAP简介 GSAP是一个非常流行的js动画库，被广泛用于创建跨浏览器和跨平台的高性能动画。它的主要特点包括： 提供丰富的属性和方法，可用于创建复杂的动画效果。 GSAP的语法 GSAP语法由三部分组成，分别是方法、目标和变量，其调用格式为gsap.to( “.box” ,{ x:200 })各部分含义如下图所示： 方法 GSAP提供了四种类型的Tween 4. gsap.fromTo()：结合gsap.from()和gsap.to()的功能，可以同时设置起始值和目标值，实现更复杂的动画效果。 2, yoyo: true, }); vue中使用GSAP 安装GSAP 要在vue中使用GSAP，我们需要先安装GSAP包 npm install gsap 或者 yarn add gsap 引用GSAP 使用import引入GSAP import { gsap } from 'gsap' 使用GSAP 首先在模板中定义一个div
style4.8K30编辑于 2023-10-14 - 来自专栏友儿
gsap+ScrollTrigger，打造震撼滚差视觉！
<script src="<em>gsap</em>.min.js"></script> <script src="ScrollTrigger.min.js"></script> <script /*# sourceMappingURL=style.css.map */ 代码js const sections = document.querySelectorAll('section'); gsap.registerPlugin (ScrollTrigger); // 注册插件 sections.forEach(section => { gsap.fromTo(section, {backgroundPositionY gsap.registerPlugin(ScrollTrigger)：注册 ScrollTrigger 插件，以便在后续代码中使用其功能。 在循环中，通过 gsap.fromTo 方法对每个
元素进行动画设置。 定义了起始的背景位置 backgroundPositionY。 1.4K10编辑于 2024-08-14 - 来自专栏前端达人
使用GSAP库打造酷炫网页文字动画效果
什么是GSAP？ GSAP，全称GreenSock Animation Platform，是一个高性能的JavaScript动画库。它可以让你在网页上轻松创建高效、流畅的动画效果。 GSAP的优势在于它的简洁性、灵活性和强大的功能，可以兼容各种浏览器，并且有丰富的文档和示例。 https://gsap.com/ 案例展示 我们将实现一个简单的网页动画效果，包括图片的缩放、文本的淡入淡出和按钮的滑动效果。 理解如何使用GSAP的stagger属性为一组元素创建错开的动画效果。 const tl = gsap.timeline({ defaults: { duration: 0.75, ease: "Power3.easeOut" }, }); 这里我们创建了一个GSAP的时间线
1.7K10编辑于 2024-06-27 - 来自专栏前端达人
GSAP动画库入门基础示例：心爱的小摩托
今天的这篇文章，我将给大家推荐另一个可选方案，一款专业的Web动画库GSAP，通过这款工具你能做出绚丽复杂的动画效果，通过本篇文章的学习，你将会学习到什么是GSAP，以及相关的入门基础知识。 一、什么是GSAP？ GSAP全称是GreenSock Animation Platform，是一个JS动画框架。 ）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。 GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是 GSAP既然这么好，我们如何安装和引用呢？ 去官网下载核心库的JS文件：gsap.min.js，目前版本大小不到60K。
5.2K00发布于 2020-03-16 - 来自专栏青年码农
【GSAP3教程】如何创建一个 Tween
上一篇就简单说了下GSAP2和GSAP3的区别，也简单说了gsap.to()的使用方法，这篇主要说如何创建一个Tween。 1 创建Tween的三个方法 gsap有三个方法可以快速创建一个Tween: gsap.to(targets, vars ) 从原本属性变化到 vars 中定义的属性 gsap.from(targets 1. gsap.to() gsap.to('#box', { duration: 5, x: 500 }) id为box的元素，从初始位置5秒钟在x轴平移500像素， ? 2. gsap.from() gsap.from('#box', { duration: 5, x: 500 }) id为box的元素，从500像素的位置5秒钟平移到初始位置， ? 3. gsap.fromto() gsap.fromTo('#box', {x:-100} , { duration: 5, x: 500 }) id为box的元素，从x轴-100像素的位置，5秒钟移动到
1.1K1511发布于 2021-08-18 - 来自专栏Web技术学苑
gsap太硬核了，实现复杂的交互动画
开始之前主要从以下几点介绍 如何使用，开始一个最简单的gsap[1] 连续动画如何实现 如何暂停开启动画 registerEffect 现在有个需求，我想让一个动画按照顺序依次消失 <div id= /lib/gsap-latest-beta.min.js"></script> 然后我们写一段简短的动画 注册动画 初始化时间线 按照顺序调用自定义动画 // 注册一个动画名 gsap.registerEffect ({ name: "myFade", effect: (targets, config) => { return gsap.to(targets, /lib/gsap-latest-beta.min.js"></script> <script> window.onload = function () { gsap.from( <script> window.onload = function () { gsap.fromTo(".text", { opacity: 0 }, {
2.2K20编辑于 2023-09-11 - 来自专栏前端达人
GSAP动画库入门基础示例：心爱的小摩托
今天的这篇文章，我将给大家推荐另一个可选方案，一款专业的Web动画库GSAP，通过这款工具你能做出绚丽复杂的动画效果，通过本篇文章的学习，你将会学习到什么是GSAP，以及相关的入门基础知识。 一、什么是GSAP？ GSAP全称是GreenSock Animation Platform，是一个JS动画框架。 ）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。 GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是 GSAP既然这么好，我们如何安装和引用呢？ 去官网下载核心库的JS文件：gsap.min.js，目前版本大小不到60K。
6.2K31发布于 2020-03-10 - 来自专栏Web前端
AI编程：开启高效编程新时代——GSAP打字机效果
他首先向AI描述了自己的需求：“我要在网页上实现一个打字机效果，文字逐个显示，并且有光标闪烁的动画，使用GSAP动画库。” AI很快给出了详细的思路和建议，告诉他可以先创建HTML结构，将文字显示区域和光标元素添加进去，然后使用CSS设置页面的样式和光标的闪烁动画，最后用JavaScript结合GSAP库来实现文字的逐个显示和删除效果 他向AI请教：“如何使用GSAP库来实现文字的动态显示和删除？”AI详细地解释了实现思路，包括使用循环和定时器来控制文字的显示和删除速度，以及使用GSAP的to方法来控制光标的透明度。 /3.11.4/gsap.min.js"></script></head><body>
<div class="typewriter" ", "Created with GSAP animation library.", "Hope you like it!"]40710编辑于 2025-05-27利用GSAP 简单实现页面横向背景平滑无缝切换
、HTML 结构五、JavaScript 脚本 要点六、CSS 层叠样式表七、实现效果前言 近期在制作自己的网站上时想尝试面包屑导航到不同页面时页面的无缝切换，考虑使用 GSAP 五、JavaScript 脚本<script setup>import gsap from "gsap";import { useRoute, ref, watch, onMounted } from "right" : "left"; // 应该直接操作背景图片个体 gsap.to(".background-item", { x: `-${toIndex * 100}%`, ", { x: `-${pageOrder.indexOf(route.path) * 100}%` });});</script>要点 首先，这里 GSAP 应该直接应用到图片个体 ，而不是其父容器 background-container，否则 GSAP 会以父容器的长度来计算。
56900编辑于 2025-02-07来自专栏前端达人玩转GSAP与barba.js，实现炫酷页面切换效果
案例展示 今天我们将通过一个实战案例，来展示如何使用GSAP和barba.js制作一个炫酷的页面切换效果。该案例展示了一个在线购物网站的首页和产品页之间的切换动画。 通过这个案例，大家可以学会如何结合GSAP和barba.js实现流畅的页面过渡效果，动画效果如视频所示： 功能描述 在本案例中，我们将实现以下动画效果，让页面切换变得更加炫酷和流畅： 页面初次加载时的动画效果 学习目标 在这个案例中，我们的学习目标包括以下几个方面，每一个目标都将帮助你更深入地理解和掌握GSAP和barba.js的应用： 了解GSAP的基础用法： 基础动画：学习如何创建基本的GSAP动画，例如从一个位置移动到另一个位置 -- 省略部分代码，请下载源码查看 --> <script src="<em>gsap</em>.min.js"></script> <! .showcase-arrow { right: 0; bottom: 50%; } } JavaScript代码详解（app.js） 这个JavaScript代码段主要使用了GSAP
2K10编辑于 2024-06-28来自专栏前端实验室膜拜！用最少的代码却实现了最牛逼的滚动动画！
我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~ 插件特点 将任何动画链接到特定元素， 安装 CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/<em>gsap</em>/3.8.0/<em>gsap</em>.min.js"></script> <script { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger ); UMD/CommonJS import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger "; gsap.registerPlugin(ScrollTrigger); 简单示例 gsap.to(".box", { scrollTrigger: ".box", // start the
3.7K20编辑于 2022-12-02来自专栏前端实验室膜拜！用最少的代码却实现了最牛逼的滚动动画！
我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~插件特点将任何动画链接到特定元素，以便它仅在视图中显示该元素时才执行该动画 安装/引用CDN<script src="https://cdnjs.cloudflare.com/ajax/libs/<em>gsap</em>/3.8.0/<em>gsap</em>.min.js"></script><script { gsap } from "gsap";import { ScrollTrigger } from "gsap/ScrollTrigger";gsap.registerPlugin(ScrollTrigger );UMD/CommonJSimport { gsap } from "gsap/dist/gsap";import { ScrollTrigger } from "gsap/dist/ScrollTrigger ";gsap.registerPlugin(ScrollTrigger);简单示例gsap.to(".box", { scrollTrigger: ".box", // start the animation
4K00编辑于 2022-11-27来自专栏nginxVue.js入门系列（二十三）：集成第三方动画库、总结过渡与动画、配置代理
常见的动画库包括： GSAP (GreenSock Animation Platform)：强大的JavaScript动画库，适合复杂的动画效果。 在本节中，我们将以GSAP为例，展示如何将第三方动画库集成到Vue.js应用中。 1.2 使用GSAP集成动画 首先，我们需要安装GSAP库： npm install gsap 然后，可以在Vue组件中使用GSAP来实现动画效果。 } from 'gsap'; export default { methods: { startAnimation() { gsap.to(this. 2.2 结合第三方动画库 当内置的过渡效果无法满足需求时，集成第三方动画库（如GSAP、Anime.js）能够帮助实现更加复杂的动画效果。
21510编辑于 2025-11-14来自专栏dmhsq_csdn_blogvitepress 打包时Cannot use import statement outside a module
去翻了下github https://github.com/vuejs/vitepress/issues/476 有些包可能不支持esm或者无cjs导出类型 改用动态引入 如 import gsap from 'gsap'; 改为 const initGsap = async ()=>{ const _gsap = await import('gsap'); return _gsap.default ; } const gsap = await initGsap();
54930编辑于 2023-09-23来自专栏向治洪React 动画框架简介
GSAP GSAP 是一个老牌的专业级动画库，从古老的 Flash 动画时代一直兴盛至今，它是一个商业产品，虽然开发者可以免费下载源代码，但如果要在商业活动中使用它，请购买相关的会员。 如果你没有使用过 GSAP，建议阅读GSAP，接下来，我们尝试将 GSAP 融入到 React 的开发中。 例如： // 导入通过 NPM 安装的 GSAP import TweenMax from 'gsap'; // 保存 ref 指向的真实节点 let refNode; class App extends 可维护性：看代码量和技术能力，CSSTransitionGroup 最简单 用户体验：GSAP >= React Motion > CSSTransitionGroup 对复杂动画的支持程度：GSAP 参考资料 React Animation React Motion A Comparison of Animation Technologies GSAP，专业的Web动画库 React GSAP Enhancer
1.8K70发布于 2018-01-26来自专栏码艺坊惊！Three.js 动画从“零基础菜鸟”到“技术大神”的蜕变之旅
三、第三方动画库：使用 GSAP 控制 Three.js 对象动画虽然 Three.js 本身提供了强大的动画功能，但在某些场景下，使用第三方动画库（如 GSAP）可以更方便地实现复杂的动画效果。 GSAP（GreenSock Animation Platform）是一个高性能的 JavaScript 动画库，它提供了丰富的动画功能和强大的性能优化。1. 为什么使用 GSAP？ 简单易用：GSAP 提供了简洁的 API，可以轻松实现复杂的动画效果。性能优化：GSAP 在内部进行了大量的性能优化，确保动画的流畅性。 实现步骤引入 GSAP：通过 CDN 或 npm 安装 GSAP，并在项目中引入。创建动画：使用 GSAP 的 gsap.to 或 gsap.from 方法创建动画，指定目标对象和动画属性。 示例代码以下是一个使用 GSAP 实现 Three.js 对象动画的示例：// 引入 GSAPimport gsap from 'gsap';// 初始化场景、相机和渲染器（省略，与基础动画相同）//
1.6K22编辑于 2025-03-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号