onclick event

[paper 1 Likes (Newbie)]

hi all!!

my first newbye post so...

I'm trying to understand how to call gsap functions through id selector by clicking a button

someone could put me on the right way?

tnx all

 

 

[Jonathan 5,389 Likes (Superhero)]

Hello paper, and Welcome to the GreenSock Forum!

 

Here are some various examples

 

See the Pen wBDHA by jonathan (@jonathan) on CodePen

See the Pen qxsfc by jonathan (@jonathan) on CodePen

See the Pen yYbBGb by jonathan (@jonathan) on CodePen

 

Do have specific effect your going for?

 

Happy Tweening!

[Aquasar 1 Likes (Newbie)]

Cool examples. Would be awesome to see some updated examples with React or Vue rather than Jquery! 😀

[ZachSaucier 7,127 Likes (Superhero)]

@Aquasar hello and welcome to the GreenSock forums!

 

It's quite straightforward to use vanilla JS instead of jQuery. React and Vue aren't similar to jQuery... Also simple to upgrade the syntax to GSAP 3! Let us know if you are running into any issues during the conversion.

[Aquasar 1 Likes (Newbie)]

Thanks for the reply @ZachSaucier . For me the issue is not using Vanilla JS instead of JQuery. It is more related to the fact of using React and the GSAP library together.  For example, as someone just starting out, the syntax is quite a bit different and takes quite a lot of digging around just to get up and running. 

Some of the things I had to search for a while

- gsap vs TweenMax vs TimeLineMax. I realize when using npm to install gsap, as most React users would I believe, the syntax is for example gsap.timeline

-  Where to put the animation logic for gsap,  for instance inside a useEffect hook 

-  Using useRef to grab dom elements for the animations.

 

Again a lot of these are probably trivial for you, but for a noob it could be non trivial, especially when trying to learn a new library

 

[ZachSaucier 7,127 Likes (Superhero)]

3 hours ago, Aquasar said:

Again a lot of these are probably trivial for you, but for a noob it could be non trivial, especially when trying to learn a new library

That's why we highly recommend people starting out with our "Getting Started" article. It explains the basics of how to get things up and running.

 

For React, we have an article on that as well: 

 

And of course you're free to ask here in the forums if you have specific questions!