🧐I created a website animation that you might stare at for a while (GSAP)🎨

Intro

I'm keep updating my brain training game, 💪🧠Muscle Brain, these days. Last time, I got so many reactions to my post. Thank you very much!😆↓
https://dev.to/webdeveloperhyper/how-i-released-chrome-extensions-muscle-brain-v4-3ijn
This time, I wanted to make a website to promote my app. I squeezed my brain hard thinking about how to entertain the website visitors, and decided to create an animation. An enjoyable website might lead to increasing the users of my app. Let's learn how to create a fun animation together!🚀

Why GSAP?

When creating an animation, using Vanilla JavaScript requires lots of coding, and CSS only cannot express complicated animation, so I searched for a good library. There are many libraries for animation such as Motion, Anime.js and others, but this time I chose GSAP (GreenSock Animation Platform). GSAP says it can do everything related to animation easily, and it is also very popular as an animation library. GSAP works fast in any framework, and Google recommends GSAP for JavaScript animations. You can animate anything JavaScript can touch, such as UI, SVG, Three.js, React components, or others with GSAP. In addition, GSAP is 100% FREE now, including all plugins.🤑

Feature	GSAP	CSS Animations
Sequence animation	✅ Easy with Timelines	⚠️ Complex
Dynamic values	✅ Calculate at runtime	⚠️ Partial
Complex easing (= speed up and slow down)	✅ Easy with many Eeasing functions	⚠️ Limited
Control	✅ play(), pause(), reverse()	⚠️ Limited

For full information of GSAP, please check the official documentation.↓
https://gsap.com/

How to use GSAP

For Node.js based projects, install GSAP via npm and import it.↓

npm install gsap

and

import { gsap } from "gsap";

For vanilla JavaScript, use CDN.↓

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

For details about installation, please check the official documentation.↓
https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&require=false

GSAP basic of basic

All you need to learn is just one piece of code for GSAP basic of basic.

gsap.to(".box", { x: 200 })

"1️⃣gsap.to(2️⃣".box", { 3️⃣x: 200 })" means "Box animates to 200px" in short.

1️⃣"gsap.to" part is called method. There are 4 main methods:
gsap.to(): defines the animation end.
gsap.from(): defines the animation start.
gsap.fromTo(): defines the animation start and end.
gsap.set(): immediately set properties with no animation.
There are many more methods, too.

2️⃣".box" part is called target. Target tells GSAP "WHAT" we want to animate.

3️⃣"x: 200" part is called variable. Variables are the properties of animation like duration, onComplete, repeat, and others. "x: 200" is equal to CSS: transform: translateX(200px), and as you can see, you can write shorter and easier than CSS. GSAP has many variables, and you can find them in the samples later.

For further information, please check the official documentation.↓
https://gsap.com/resources/get-started

I created a floating brain and twinkling star animation with GSAP helped by AI. Let's take a closer look at them.

Twinkling Star animation with GSAP (Level 1)

🔷 Set random position and size of stars with Math.random().
🔷 Set random twinkle with GSAP.↓

// Animate: twinkle from 1 (bright) to 0.3 (dim)
gsap.to(star, {
  opacity: 0.3,
  duration: Math.random() * 2 + 1, // 1-3 seconds
  repeat: -1, // Repeat forever
  yoyo: true, // Go back and forth
  ease: 'power1.inOut',
  delay: Math.random() * 2 // Start at different times
});

You can check twinkling star animation and its code on CodePen.↓

Floating Brain animation with GSAP (Level 2)

🔷 Set random position for brain with Math.random().
🔷 Set random movement, rotation, pulse effects (grow and shrink) for brain with GSAP.↓

// Use GSAP to animate brain to new position
gsap.to(brain, {
  x: randomX,           // Move to random X
  y: randomY,           // Move to random Y
  duration: 3,          // Take 3 seconds to move
  ease: 'power2.inOut', // Smooth acceleration/deceleration
  onComplete: moveBrain // When done, call this function 

// Add continuous rotation (spins forever)
gsap.to(brain, {
  rotation: 360,     // Rotate one full circle (360 degrees)
  duration: 3,      // Take 3 seconds for one rotation
  repeat: -1,        // Repeat forever (-1 = infinite)
  ease: 'none'       // Constant speed (no acceleration)
});

// Add pulsing effect (grows and shrinks)
gsap.to(brain, {
  scale: 1.4,        // Grow to 1.4x size (40% bigger)
  duration: 1,       // Take 1 seconds to grow
  repeat: -1,        // Repeat forever (-1 = infinite)
  yoyo: true,        // Reverse animation (grow → shrink → grow)
  ease: 'sine.inOut' // Smooth in and out
});

You can check floating brain animation and its code on CodePen.↓

My website animation with GSAP

I made a simple website with Next.js and added animations with GSAP. This landing page is for my app, Muscle Brain. GSAP animations are based on the CodePen samples shown above. For twinkling stars animation, I added space clouds that move randomly. Also, for Brain floating animation, I created 17 different types of brains for fun. Each Brain has its own character. Which brain is your FAVE?😍

#	Image	Name	Feature
1	🧠	Mr. Big	Huge size
2	🧠	Mr. Tiny	Tiny size
3	🧠	Mr. Fast	Ultra fast movement
4	🧠	Mr. Slow	Ultra slow movement
5	🧠	Mr. Shy	Runs from mouse
6	🧠	Mr. Ghost	Leaves ghost trail
7	🧠	Mr. Spin	Super fast rotation
8	🧠	Mr. Bounce	Bouncy arrival
9	🧠	Mr. Pulse	Intense pulsing
10	💩	Mr. Poop	Different Species
11	🧠	Mr. Spiral	Spirals inward to center
12	🧠	Mr. Wave	Circular tornado spiral
13	🧠	Mr. Teleport	Instant teleportation
14	🧠	Mr. Tornado	Tornado spiral
15	🧠	Mr. Stalker	Follows mouse
16	🧠	Mr. Stretch	Stretches up and down
17	🧠	Mr. Rainbow	Changes colors

Collector Brain

At the bottom of the website, I created Collector Brain mini game. All the floating Brains are clickable. If you click a brain, its name will be checked on the website. So, challenge clicking all unique 17 brains. You can see my website and Collector Brain at the YouTube below.↓

Brain Galaxy mode

If you want only the Brain and Galaxy animation like a wallpaper "Brain Galaxy mode" might be a good choice. It displays brains, stars, and clouds animations with GSAP without the website background. You can go to this page by pressing the "Brain Galaxy" button. I recorded the Brain Galaxy animation to YouTube.↓

Galaxy mode

When you want to just relax, "Galaxy mode" might be a good choice. It displays only stars and clouds animations with GSAP, without Brains. I made the Galaxy animation move less for relaxation purposes, but when you watch the video at a higher speed using the slider, you can clearly see the stars and clouds animating. You can move to this page by pushing the "Galaxy" button. I recorded the Galaxy animation to YouTube.↓

Muscle Brain website deployed on Vercel

https://musclebrain.vercel.app/

Muscle Brain v4

Let me introduce my app, "Muscle Brain".

💪🧠How to Boost your Brain for Free (Muscle Brain - Ultimate Edition)

Muscle Brain is an ultimate working memory training game that stimulates your brain. Based on scientifically-proven N-back methodology, this game challenges you to remember, manipulate, and recall number sequences. No need to be afraid of the hard training. Mr. Brain, hero for everyone will support you alongside the game and save the day! 😀

With high Working Memory you can:
🙆 Handle complex tasks easily
🙆 Improve multitasking and focus
🙆 Boost creative thinking and problem solving

Game Features:
🧠 Unlimited Mode - Train your brain until your limit and burn out
👶 Practice Mode - See the answers as you learn the game
🎵 Rhythm Mode - Time your inputs to the rhythm of Mr. Brain
🔥 Daily Streaks - Build habits and unlock achievements
🔤 ABC Mode - Challenge with letter sequences instead of numbers
⚙️ Settings - Adjust shift direction, shift count, and number length for maximum effect
🌍 EN/JP Support - Bilingual interface and sounds
💯 History - Collect all 120 gold medals and become a Muscle Brain Legend!

100% Free - No Ads, No Tracking, No Sign-Up Required

Feedback Welcome:
I would love to hear about your experience using my app.👂 If you have any ideas for the next update, bug reports, or any other feedback, feel free to comment on this post. Or, you can contact me directly via X (in my DEV Community profile).

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
V4 is the latest, so please reload the page, if it still shows the old version.
https://apps.microsoft.com/detail/9NG572QMV56M

Outro

By using GSAP, I was able to easily create a unique animation. I could reduce code compare with vanilla JavaScript, and I was also able to create animations that can't be done with CSS alone. I might create more fun animations with GSAP, or maybe try 3D animation in the future. Creating an animation is SUPER FUN!🥰

I hope you learned something from this post.
Thank you for reading.
Happy AI coding!🧠
You're absolutely right!🤖