Sannan Posted November 23, 2021 Share Posted November 23, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 Hi there @Sannan, I'm afraid it's a little out of the scope of these forums to provide custom solutions. But we'll happily nudge you in the right direction as you go along, and we're here is you have any GSAP specific questions. Have you taken a look at this article? 1 Link to comment Share on other sites More sharing options...
Sannan Posted November 23, 2021 Author Share Posted November 23, 2021 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? Link to comment Share on other sites More sharing options...
Sannan Posted November 23, 2021 Author Share Posted November 23, 2021 4 minutes ago, Cassie said: Hi there @Sannan, I'm afraid it's a little out of the scope of these forums to provide custom solutions. But we'll happily nudge you in the right direction as you go along, and we're here is you have any GSAP specific questions. Have you taken a look at this article? 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? Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 Yep, very possible. Everything you need to get going is in that getting started article. If you get stuck we'll happily help if you provide a minimal demo! Link to comment Share on other sites More sharing options...
Sannan Posted November 23, 2021 Author Share Posted November 23, 2021 3 minutes ago, Cassie said: Yep, very possible. Everything you need to get going is in that getting started article. If you get stuck we'll happily help if you provide a minimal demo! Ok thank you so much for the help. Link to comment Share on other sites More sharing options...
Sannan Posted November 24, 2021 Author Share Posted November 24, 2021 13 hours ago, Cassie said: Yep, very possible. Everything you need to get going is in that getting started article. If you get stuck we'll happily help if you provide a minimal demo! 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 Link to comment Share on other sites More sharing options...
Cassie Posted November 24, 2021 Share Posted November 24, 2021 Is there a chance you could pop this into a codepen for me - then I can help refactor. See the Pen by pen (@pen) on CodePen Some notes You can position everything with either CSS, or gsap.set() first Use a timeline for sequencing animations. ✨ Use the GSAP shorthands for transforms rather than setting them as a string. like this... gsap.set("#mathInstrument", { opacity: 0, xPercent: -70, yPercent: -150% }) gsap.set("#atom", { opacity: 0, xPercent: 170, yPercent: -150% }) let tl = gsap.timeline() tl.to("#mathInstrument", { duration: 0.8, opacity: 1, ease: "power3.out", }) .to("#atom", { duration: 0.8, opacity: 1, ease: "power3.out", }) Hope this helps! Link to comment Share on other sites More sharing options...
Sannan Posted November 24, 2021 Author Share Posted November 24, 2021 1 hour ago, Cassie said: Is there a chance you could pop this into a codepen for me - then I can help refactor. See the Pen by pen ( See the Pen by pen (@pen) on CodePen ) on CodePen Some notes You can position everything with either CSS, or gsap.set() first Use a timeline for sequencing animations. ✨ Use the GSAP shorthands for transforms rather than setting them as a string. like this... gsap.set("#mathInstrument", { opacity: 0, xPercent: -70, yPercent: -150% }) gsap.set("#atom", { opacity: 0, xPercent: 170, yPercent: -150% }) let tl = gsap.timeline() tl.to("#mathInstrument", { duration: 0.8, opacity: 1, ease: "power3.out", }) .to("#atom", { duration: 0.8, opacity: 1, ease: "power3.out", }) Hope this helps! This is my entire code: See the Pen jOLjLvv by SannanWebMaker (@SannanWebMaker) on CodePen Link to comment Share on other sites More sharing options...
Sannan Posted November 24, 2021 Author Share Posted November 24, 2021 Just now, Sannan said: This is my entire code: All the gsap code is at the last couple of lines in the JS. Link to comment Share on other sites More sharing options...
OSUblake Posted November 24, 2021 Share Posted November 24, 2021 Hi Sannan, Let's take this one step at a time. You should start by making the changes Cassie suggested, like getting rid of the transform strings. // bad gsap.to(".foo", { css: { transform: "translate(-70%, -150%)", } }); // good gsap.to(".foo", { xPercent: -70, yPercent: -150 }); And you don't need to include the css wrapper for any of your animations. // bad gsap.to("#h31", { css: { display: "none" } }); // good gsap.to("#h31", { display: "none" }); Next step would be to get rid of all those animations in the onComplete and refactor your code to use timelines instead. Here's a good resource to learn about timelines and how to position your animations. And for a more in-depth guide to GSAP, @Carl has some excellent courses. https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484 5 Link to comment Share on other sites More sharing options...
Sannan Posted November 24, 2021 Author Share Posted November 24, 2021 @OSUblake Thanks a lot for all the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now