Slide In From Left - Gsap Typing CST Test
Loading…
Slide In From Left — Gsap Code
Slides a div in from the left side of the screen.
# gsap/demo/slide_left.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
</head>
<body>
<div id="slide" style="width:100px;height:100px;background:purple;"></div>
<script>
gsap.from('#slide', { x: -300, duration: 2, ease: 'power2.out' });
</script>
</body>
</html>Gsap Language Guide
GSAP (GreenSock Animation Platform) is a high-performance JavaScript library for creating complex animations in the browser. It provides an easy-to-use, robust API for animating DOM elements, SVGs, canvas objects, and even WebGL/Three.js content, with precise control over timing, easing, and sequencing.
Primary Use Cases
- ▸DOM element animations for websites
- ▸SVG and vector graphic animations
- ▸Canvas and WebGL (Three.js) animations
- ▸Scroll-triggered and timeline-based UI effects
- ▸Interactive and gamified web interfaces
Notable Features
- ▸High-performance, hardware-accelerated animations
- ▸Timeline management for sequencing multiple animations
- ▸Ease of use with chainable API
- ▸Cross-browser consistency and fallbacks
- ▸Plugins for scroll, morphing, text, and physics-based animations
Origin & Creator
GSAP was created by Jack Doyle (GreenSock) in 2008 and has since become the industry standard for JavaScript-based animations, maintained by a professional team with open-source contributions.
Industrial Note
GSAP is widely used in interactive marketing, high-end UI/UX animations, banner ads, website transitions, data visualization animations, game UIs, and creative coding projects that demand precise, performant, and complex motion.