Interactive animation

[senna]

Hello everyone,

 

I'm a student and I need to learn how to work with GreenSock. So far I have created some animations with TweenMax and TimeLinemax. Now I want to learn how to make those animations interactive. 

 

For example I would like to make a circle that changes color when you click it. 

 

I hope you can help me get started with this.

Thanks in advance 

 

 

[Jonathan]

Hello senna, and Welcome to the GreenSock forum!

Here is a circle that changes color when hovered over:

 

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

// create ne timeline instance in paused state
var tl = new TimelineMax({paused:true});

// create a tween
tl.to("circle", 1, {
  fill:"#CC0000"
});

// hover events
$(document).on("mouseenter", "circle", function(){
  // play timeline
  tl.play();
}).on("mouseleave", "circle", function(){
  // reverse timeline to bring color back to black
  tl.reverse();
})

Hope this helps!

 

GSAP Jump Start:

https://greensock.com/jump-start-js#from-tween

Thanks!

[senna]

Thank you! It does help to give me an idea how to work, but I still have a problem. When I adjust the code in the codepen you gave it works, but when I use the same code in one of my own pens or in SublimeText nothing happens. Do you know why?

 

See the Pen yaYoZZ by codesen (@codesen) on CodePen

[Jonathan]

In the JS panel in codepen.. where you see the gear icon. You have to use the dropdown to include TweenMax JS and jQuery

 

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

 

TweenMax is used for the animation to work

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

And jQuery to have the event handlers work

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

You know what I mean?

 

Here is a link to codepen support page on how to add external resources:

 

https://blog.codepen.io/documentation/editor/adding-external-resources/

 

[WarenGonzaga]

Thank you! It does help to give me an idea how to work, but I still have a problem. When I adjust the code in the codepen you gave it works, but when I use the same code in one of my own pens or in SublimeText nothing happens. Do you know why?

 

See the Pen yaYoZZ by codesen (@codesen) on CodePen

 

 

In the JS panel in codepen.. where you see the gear icon. You have to use the dropdown to include TweenMax JS and jQuery

 

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

 

TweenMax is used for the animation to work

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

And jQuery to have the event handlers work

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

You know what I mean?

 

Here is a link to codepen support page on how to add external resources:

 

https://blog.codepen.io/documentation/editor/adding-external-resources/

 

 

Hello guys! Thanks for the answer Jonathan! Stay awesome dude! I will help you to explain your answer.

 

Your codepen has no external javascript links (CDN version of GSAP's TweenMax and Jquery)

 

Here's the step by step pictures!

 

 

 

 

 

There you go buddy!

 

I hope it helps!

[Carl]

Thanks for the help, Warren.

[senna]

Thank you all! So far it works! 

[senna]

Hello, I have an other question. I want to be able to toggle the circle between black and orange. To me it makes  sense to use an 'if statement'. But I tried various ways and it won't work. So I'm wondering, what is an easy way to accomplish that. And is there a feature in GreenSock, or do I use the regular js code? 

 

The code I created: 

See the Pen yaYoZZ by codesen (@codesen) on CodePen

 

I'm thinking about something like:

If you click the circle when it's black, it turns orange

If you click the circle when it's orangje, it turns black

 

(sounds pretty simple, but I'm justing starting with js and GSAP) 

[Carl]

Thanks for the demo.

The trick here is that you can just change the reversed() state on each click.

 

$(document).on("click", "circle", function(){
  tl.reversed(!tl.reversed());
})

http://codepen.io/GreenSock/pen/WGwBpQ?editors=0010

 

The video here explains how to toggle the paused() state of an animation: http://greensock.com/playpause Same principle for reversing.

[senna]

Thank you!

[senna]

Hello again!

I want to use this code in Sublime Text, but it doesn't work. I use Chrome as my browser. 

Is there a reason that this doesn't work? I copy paste the codes and linked js, css and GSAP

 

I can't find any reason why the code that works in codepen shouldn't work with Sublime Text and Chrome. 

 

(the circle shows up but it doesn't change color when you click it)

[senna]

okay in case anyone else had the same problem. This is what I did wrong: 

I put the link to JavaScript before the links to GreenSock and iQuery

 

It's kind of obvious, but the only thing I needed to do was first link to iQuery and GreenSock and after that link to JS 

[Jonathan]

Glad you got it working senna, and thank you for posting your solution