Jump to content

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

Help getting started with buttons

Recommended Posts

Hi all.


I've been using GSAP with flash for a bit so I understand the basic functionality, but I can't seem to figure out how to interact with buttons in html5 (I'm also not very familiar with javascript.)


On all the demos I've seen, there are just buttons that just randomly are on the page to trigger animations.


How do I make buttons/trigger my functions and tweens? (in Flash I could just make anything a button and name it, I've tried do a similar thing with giving elements id's but to no avail)


And follow up, how do I make a button move? (If anyone has a simple file with a button that you click and it moves across the page that would be very helpful.)




Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


As we understand that coming from flash to HTML/CSS/JS can be a bit daunting at times, I can assure you that taming that beast it's easier than it seems.


In HTML everything can have a button behaviour, you just need to add the click event listener to it. As you can see here's a similarity with AS and in the path of discovering how JS works you'll find other parts more familiar and other less familiar.


Unfortunately we can't spend a lot of time teaching how HTML/CSS/JS works, because of time issues we have to leave that to the users. But don't be discouraged at all, there are plenty of learning resources out there, some free (a lot actually) and some paid (also a lot). In order to start with JS I'd recommend you to start working with jQuery as it will simplify start working with JS and as yo become more familiar with it you can start going into more complex JS stuff. Take a look at this pages in order to get a fast way to learn about jQuery:






Finally here's a simple example of how to create buttons in HTML and use GSAP to animate them:


See the Pen LVQJJb by anon (@anon) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks you very much.


I think that codepen should be what I needed to figure out the whatever pice I was missing.

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.