Star-Shaped Background Animation with SVG and GSAP #gsap

This tutorial shows how to create a star-shaped background animation using HTML, CSS, SVG, and GSAP. The background is built with SVG polygon shapes placed inside a clip-path element. These shapes are animated with GSAP to grow and shrink in a loop, using random scale, duration, and delay values. The animation reveals a colorful gradient background by masking the shape area with SVG.

This project includes:
– Using SVG polygons to create custom star shapes
– Masking the background with SVG to show shape outlines
– Animating shapes with GSAP using scale, delay, repeat, and yoyo
📂 Resources:
1) GSAP Installation: https://gsap.com/docs/v3/Installation/
2) SVG file: https://github.com/ecemgo/assets/tree/main/SVG
3) The background image is designed by Freepik: https://www.freepik.com
⭐Lists:
- GSAP: https://www.youtube.com/playlist?list=PLes5YJFlROjHOLLJBZkwpfUihD_ouui8w
- Swiper JS: https://www.youtube.com/playlist?list=PLes5YJFlROjF1Lf2RZykNeD-q6KuUYXmn
- Slider with Vanilla Javascript & CSS: https://www.youtube.com/playlist?list=PLes5YJFlROjE2USc2RbzJXLzANyxijsUb
- Background Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjE3QNHDn6UNzP5fiMhzQlze
- CSS Hover Effect: https://www.youtube.com/playlist?list=PLes5YJFlROjGxfF4QgD4QwR6noJyCI_8f
👩‍💻 My Social Profiles:
- X: https://x.com/ecemgo
- Codepen: https://codepen.io/ecemgo
- GitHub: https://github.com/ecemgo
- TikTok: https://www.tiktok.com/@ecemgo
- Bluesky: https://bsky.app/profile/ecemgo.bsky.social
🕔 Timestamps:
0:00 – Intro
0:16 – HTML: SVG and Title
0:51 – CSS: Background Setup and SVG Masking
2:00 – JavaScript: Animate Shapes with GSAP

Видео Star-Shaped Background Animation with SVG and GSAP #gsap канала Ecem Gokdogan