Jump to content
GreenSock

paper

onclick event

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

 

Link to comment
Share on other sites

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! :)

  • Like 3
Link to comment
Share on other sites

  • 3 years later...

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

  • Like 1
Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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

 

Link to comment
Share on other sites

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!

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.
×