AduITC
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by AduITC
-
-
Good morning everyone!
I'm very sorry to bother you with a trivial question, but I'm totally new to this amazing tool that is GSAP and I'm still struggling to understand its syntax and logic, as I'm not an experienced dev. I really want to learn this wonderful library as it seems very powerful, but for now I'm stuck on small basic things.
I have created the following animation in CSS:
https://codepen.io/AduITSU/pen/BaLMLYO
Please, ignore the 4s pause between each repeat: it shouldn't be there in the final concept. As you can see, each object-pair gradually changes color to light blue in 1s and then reverts back to its original fill in 1s before the following object-pair does the same thing and so forth.
I've tried to replicate this in GSAP... here's the miserable result:
https://codepen.io/AduITSU/pen/vYXbXWW
I suppose I must place the "stagger" object somewhere else but I can't figure out where. Plus, I don't know which GSAP easing is the most similar to the CSS normal "ease". Could you please help me guys??
Thank you very much for your patience and kindness!
Staggered multiple-element fade-in-out animation
in GSAP
Posted
Thank you very much, Carl!
This is exactly what I was looking for!
I really appreciate your help and the resources you pointed me to. I will study them carefully in order to enhance my very poor "mastery" of GSAP!
Thanks again for your kindness!