Jump to content
GreenSock

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

Interactive animation

Recommended Posts

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 

 

 

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/

 

:)

Link to comment
Share on other sites

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!

 

h_1473937893_3929155_4703a2a5fb.png

 

h_1473937930_5723953_096c01c895.png

 

h_1473937961_8025176_9d1f949506.png

 

h_1473937988_9426865_44d043907a.png

 

There you go buddy!

 

I hope it helps!

  • Like 4
Link to comment
Share on other sites

Thanks for the help, Warren.

  • Like 1
Link to comment
Share on other sites

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) 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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

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