JavaScript 动画库
1.GSAP（GreenSock动画平台）：动画强国
-
https://gsap.com/
gsap.to('.box', {duration: 2, x: 300, rotation: 360, ease: 'bounce'});
2. Anime.js：简单但强大
-
https://animejs.com/
anime({targets: '.circle',translateX: 250,scale: 2,duration: 3000 });
3. Velocity.js：速度与优雅的结合
http://velocityjs.org/
$('.element').velocity({translateY: '200px',rotateZ: '45deg'
}, 1000);4. Three.js：将 3D 带入 Web
-
https://threejs.org
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);5. Lottie：动画变得简单
-
https://lottiefiles.com/
lottie.loadAnimation({container: document.getElementById('lottie-container'),renderer: 'svg',loop: true,autoplay: true,path: 'data.json' });
6. Popmotion：最佳灵活性
-
https://popmotion.io
animate({from: 0,to: 100,onUpdate: latest => console.log(latest) });
7. Mo.js：动态图形变得简单
-
https://mojs.github.io/
const burst = new mojs.Burst({radius: { 0: 100 },count: 5,children: {shape: 'circle',fill: { 'cyan' : 'yellow' },duration: 2000} });
8.Typed.js：让文本栩栩如生
-
https://mattboldt.com/demos/typed-js/
new Typed('#element', {strings: ['Hello, World!', 'Welcome to my website!'],typeSpeed: 50 });
9. AniJS：非编码人员的动画
-
https://anijs.github.io
<div data-anijs='if: click, do: fadeIn, to: .target'></div>
10. Framer Motion：React 的动画超级英雄
-
https://www.framer.com/motion/
<motion.divanimate={{ x: 100 }}transition={{ duration: 2 }} />
11. ScrollMagic：基于滚动的动画大师
-
http://scrollmagic.io/
new ScrollMagic.Scene({triggerElement: '#trigger',duration: 300
})
.setTween('#animate', {scale: 2.5})
.addTo(controller);
12. Motion One：小而强大
-
https://motion.dev/
animate('#box', { x: 100 }, { duration: 1 });