Welcome to my GSAP learning journey! In this series, I'll share my progress as I explore the GreenSock Animation Platform (GSAP). Today, I started with the basics of GSAP's animation capabilities, focusing on gsap.to
, gsap.from
, and timelines.
๐ข GSAP Basics: to
and from
GSAP provides intuitive methods for creating animations:
- Animating Properties Animate the position, rotation, color, and scale of an element:
gsap.to("#box", {
x: 500,
y: 500,
duration: 2,
});
- Animating with Delay Add a delay for smoother animation sequences:
gsap.from("#box2", {
x: 800,
y: 500,
duration: 2,
delay: 2,
});
- Combining Multiple Effects Enhance the animation with multiple transformations:
gsap.to("#box", {
rotate: 360,
backgroundColor: "blue",
borderRadius: "50%",
scale: 0.75,
duration: 2,
});
๐ Looping and Yoyo Effects
Create infinite loops and oscillating animations using repeat
and yoyo
:
gsap.to("#box", {
x: 1200,
rotate: 360,
delay: 1,
duration: 2,
repeat: -1, // Infinite loop
yoyo: true, // Reverses animation
});
๐ Managing Complex Animations: GSAP Timelines
Timelines allow chaining animations for better control and synchronization. Hereโs how I created a sequence of animations:
- Simple Timeline
var tl = gsap.timeline();
tl.to("#box", {
x: 1000,
rotate: 360,
duration: 2,
backgroundColor: "blue",
});
tl.to("#box2", {
x: 1000,
rotate: 360,
duration: 2,
backgroundColor: "lightblue",
});
tl.to("#box3", {
x: 1000,
rotate: 360,
duration: 2,
backgroundColor: "lightgreen",
});
- Animating Navigation Elements I also used timelines for staggered animations of a navigation bar:
var tl = gsap.timeline();
tl.from(".logo", {
y: "-30px",
opacity: 0,
duration: 1,
delay: 1,
});
tl.from(".links h4", {
y: "-30px",
opacity: 0,
duration: 1,
stagger: 0.5,
});
tl.from(".main", {
y: "-30px",
opacity: 0,
duration: 1,
scale: 0.3,
});
๐ฏ Key Takeaways from Day 1
-
gsap.to
animates from the current state to the target state. -
gsap.from
animates from the target state to the current state. - Timelines simplify the creation of synchronized animations.
๐จ Final Project Demo
Check out the live demo of what I created on Day 1:
๐ Day 1 GSAP Demo
๐ GitHub Repository
Explore the source code for the Day 1 project on GitHub:
๐ GitHub: GSAP Basics
This is just the beginning! In the coming days, I'll dive deeper into advanced GSAP features. Stay tuned for Day 2! ๐
Let me know what you think and share your tips in the comments below!
Top comments (0)