GSAP
1.0.0
GSAP เป็น ไลบรารี แอนิเมชั่น JavaScript ที่ทำให้นักพัฒนากลายเป็นฮีโร่แอนิเมชั่น สร้างภาพเคลื่อนไหวประสิทธิภาพสูงที่ทำงานใน ทุก เบราว์เซอร์หลัก Animate CSS, SVG, Canvas, React, Vue, WebGL, สี, สตริง, เส้นทางการเคลื่อนไหว, วัตถุทั่วไป ... ทุกสิ่งที่ JavaScript สามารถสัมผัสได้! ปลั๊กอิน Scrolltrigger ของ GSAP มอบภาพเคลื่อนไหวบนสกรอลล์แบบกรามพร้อมรหัสน้อยที่สุด GSAP.MatchMedia () ทำให้การสร้างภาพเคลื่อนไหวที่ตอบสนองต่อการเข้าถึงเป็นมิตรกับการเข้าถึงได้ง่าย
ไม่มีห้องสมุดอื่นใดที่ส่งการจัดลำดับขั้นสูงความน่าเชื่อถือและการควบคุมที่เข้มงวดในขณะที่แก้ปัญหาในโลกแห่งความจริงในกว่า 12 ล้านไซต์ GSAP ทำงานรอบ ๆ เบราว์เซอร์นับไม่ถ้วน แอนิเมชั่นของคุณ ใช้งานได้ ที่แกนกลางของมัน GSAP เป็นตัวจัดการคุณสมบัติความเร็วสูงการอัปเดตค่าเมื่อเวลาผ่านไปด้วยความแม่นยำสูง เร็วกว่า jQuery ถึง 20 เท่า!
GSAP มีความยืดหยุ่นอย่างสมบูรณ์ โรยทุกที่ที่คุณต้องการ ศูนย์การพึ่งพา
มีปลั๊กอินเสริมมากมายและฟังก์ชั่นการผ่อนคลายสำหรับการบรรลุเอฟเฟกต์ขั้นสูงได้อย่างง่ายดายเช่นการเลื่อน, morphing, เคลื่อนไหวตามเส้นทางการเคลื่อนไหวหรือภาพเคลื่อนไหวพลิก แม้จะมีผู้สังเกตการณ์ที่มีประโยชน์สำหรับการตรวจจับเหตุการณ์ปกติในเบราว์เซอร์/อุปกรณ์
ดูเอกสารฉบับเต็มที่นี่รวมถึงคู่มือการติดตั้ง
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >ดูหน้า GSAP เฉพาะของ JSDELIVR สำหรับลิงก์ CDN ด่วนไปยังไฟล์/ปลั๊กอินหลัก มีคำแนะนำในการติดตั้งเพิ่มเติมที่ GSAP.com
เครือข่ายโฆษณาที่สำคัญทุกแห่งไม่รวม GSAP จากการคำนวณขนาดไฟล์ และส่วนใหญ่มีอยู่ใน CDN ของตัวเองดังนั้นติดต่อพวกเขาสำหรับ URL ที่เหมาะสม
ดูคำแนะนำในการใช้ GSAP ผ่าน NPM ที่นี่
npm install gsapแกนกลางของ GSAP สามารถเคลื่อนไหวได้เกือบทุกอย่างรวมถึง CSS และแอตทริบิวต์รวมถึงมันรวมถึงวิธีการยูทิลิตี้ทั้งหมดเช่น Interpolate (), MapRange (), eases ส่วนใหญ่และสามารถทำ snapping และ modifiers ได้
// typical import
import gsap from "gsap" ;
// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger" ;
import Flip from "gsap/Flip" ;
import Draggable from "gsap/Draggable" ;
// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap , ScrollTrigger , Draggable , MotionPathPlugin } from "gsap/all" ;
// don't forget to register plugins
gsap . registerPlugin ( ScrollTrigger , Draggable , Flip , MotionPathPlugin ) ; ไฟล์ NPM เป็นโมดูล ES แต่ยังมี A / DIST / DIRECTORY พร้อมไฟล์ UMD สำหรับความเข้ากันได้เป็นพิเศษ
ดาวน์โหลดปลั๊กอินสมาชิกคลับ GSAP เท่านั้นจากบัญชี GSAP.com ของคุณจากนั้นรวมไว้ใน Payload JS ของคุณเอง มีแม้แต่ไฟล์ tarball ที่คุณสามารถติดตั้งด้วย NPM/เส้นด้าย GSAP มีรีจิสทรี NPM ส่วนตัวสำหรับสมาชิกด้วย โพสต์คำถามในฟอรัมของเราและเรายินดีที่จะช่วยเหลือ
หากคุณกำลังมองหาแอนิเมชั่นที่ขับเคลื่อนด้วยสกรอลล์ปลั๊กอิน Scrolltrigger ของ GSAP เป็นมาตรฐานใหม่ มีสโครลสโมสรสหายเช่นกัน
มีแพ็คเกจ @GSAP / React ที่เปิดเผย hook useGSAP() ซึ่งเป็นการทดแทนแบบเลื่อนลงสำหรับ useEffect() / useLayoutEffect() งานทำความสะอาดอัตโนมัติ โปรดอ่านคู่มือ React สำหรับรายละเอียด
มี 3 เหตุผลหลักที่ทุกคนลงทะเบียนสำหรับ Club GSAP:
เรียนรู้เพิ่มเติม
https://gsap.com/trial
ถามในฟอรัม GSAP ที่เป็นมิตร หรือแบ่งปันความรู้ของคุณและช่วยเหลือคนอื่น - เป็นวิธีที่ดีในการฝึกฝนทักษะของคุณ! รายงานข้อบกพร่องใด ๆ ที่นั่นด้วย (หรือยื่นปัญหาที่นี่หากคุณต้องการ)
สามารถดูใบอนุญาตมาตรฐาน "ไม่มีค่าใช้จ่าย" ของ Greensock ได้ที่ https://gsap.com/standard-license สมาชิกคลับ GSAP ได้รับสิทธิ์เพิ่มเติม ดู https://gsap.com/licensing/ สำหรับรายละเอียด เหตุใด GSAP จึงไม่ใช้ใบอนุญาตโอเพนซอร์ส MIT (หรือคล้ายกัน) และทำไมจึงเป็นสิ่งที่ ดี ? บทความนี้อธิบายได้ทั้งหมด: https://gsap.com/why-license/
ลิขสิทธิ์ (C) 2008-2023, Greensock สงวนลิขสิทธิ์
