Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Sannan

Members
  • Posts

    8
  • Joined

  • Last visited

Sannan's Achievements

  1. @OSUblake Thanks a lot for all the help.
  2. All the gsap code is at the last couple of lines in the JS.
  3. This is my entire code: https://codepen.io/SannanWebMaker/pen/jOLjLvv
  4. 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
  5. Ok thank you so much for the help.
  6. 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?
  7. 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
×