Jump to content
Search Community

How do I make such animation in GSAP?

Sannan test
Moderator Tag

Recommended Posts

 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

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

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.

 

 

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?

Link to comment
Share on other sites

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

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

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

 

 

  • Like 5
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...