Help getting started with buttons

[jsnyd153]

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

 

 

Thanks

[Rodrigo]

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:

 

http://learn.jquery.com/

 

http://www.w3schools.com/jquery/default.asp

 

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

[jsnyd153]

Thanks you very much.

 

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