GSAP Image and Text Reveal Animation | Timeline, ScrollTrigger, SplitText
This tutorial explains how to create a reveal animation using GSAP. It shows how to animate multiple images with clip-path and how to animate text letter by letter using GSAP SplitText. The tutorial also explains how to control animation flow and timing using a GSAP timeline. In addition, GSAP ScrollTrigger is used to trigger the animation on scroll and to adjust start positions and timing for smoother scroll behavior. The layout is responsive and works on different screen sizes.
📂 GSAP Installation: https://gsap.com/docs/v3/Installation/
🏞️ The images are designed by Freepik: https://www.freepik.com
⭐Lists:
GSAP: • GSAP
Swiper JS: • Swiper JS
Slider with Vanilla Javascript & CSS: • Slider with Vanilla Javascript & CSS
Background Animation: • Background Animation
CSS Hover Effect: • CSS Hover Effect
👩💻 My Social Profiles:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:29 – HTML
0:55 – CSS: Layout and Styles
2:57 – JavaScript: GSAP Timeline, Timing Control, SplitText
5:36 – GSAP ScrollTrigger