Sannan

@OSUblake Thanks a lot for all the help.

All the gsap code is at the last couple of lines in the JS.

This is my entire code: https://codepen.io/SannanWebMaker/pen/jOLjLvv

Hi, Cassie, I tried to do the animation and this is what I've got so far. Untitled9 (1).mp4 This is my current code gsap.to("#mathInstrument", { duration: 0.8, opacity: 0, ease: "power3.out", css: { transform: "translate(-70%, -150%)", }, onComplete: function() { gsap.to("#atom", { duration: 0.8, opacity: 0, ease: "power3.out", css: { transform: "translate(170%, -150%)", }, onComplete: function() { gsap.to("#mathInstrument", { opacity: 0, }); gsap.to("#atom", { opacity: 0, }); gsap.to("#formula", { duration: 0.4, opacity: 1, ease: "power3.out", y: -100, x: -660 }); gsap.to("#bulb", { duration: 0.8, opacity: 1, ease: "power3.out", y: 490, x: -490, onComplete: function() { gsap.to("#formula", { opacity: 0, }); gsap.to("#bulb", { opacity: 0, }); gsap.to("#pi", { opacity: 0, }); gsap.to("#calculator", { duration: 0.8, opacity: 1, ease: "power3.out", y: 550, x: 1200, }); gsap.to("#mathInstrument", { duration: 0.8, opacity: 1, ease: "power3.out", y: -400, x: -560, }); gsap.to("#atom", { duration: 0.8, opacity: 1, ease: "power3.out", y: -600, x: 1200, onComplete: function() { gsap.to("#mathInstrument", { opacity: 0, }); gsap.to("#atom", { opacity: 0, }); gsap.to("#formula", { opacity: 1, ease: "power3.out", y: -40, x: -690, }); gsap.to("#bulb", { opacity: 1, ease: "power3.out", y: 560, x: -520, onComplete: function() { gsap.to("#formula", { opacity: 0 }); gsap.to("#bulb", { opacity: 0, }); gsap.to("#calculator", { opacity: 0, }); gsap.to("#atom", { opacity: 1, ease: "power3.out", }); gsap.to("#mathInstrument", { opacity: 1, ease: "power3.out", }); gsap.to("#pi", { opacity: 1, ease: "power3.out", }); } }); } }); } }); } }); } }); Now the thing is that I want to make the animation exactly like in the initial video in the post, I mean in what I made using GSAP you see at the start the icons move to their places? yeah I want them to be there before appearing jsut like in the video, how do I do that? Untitled9 (1).mp4

Ok thank you so much for the help.

yes I have, I have even done some animations, but doing something as complex as in the video, is it possible? and even though I now understand that it's off-topic can you give me a theory or a direction to where should I go to be able to do this or learn how to do this?

I have this video, and I wanted to know how do I make such an animation in GSAP? I am an absolute beginner to it though I think It's something related to staggering and timeframes, any feedback will be appreciated :) Untitled.mp4 Untitled.mp4