Jump to content
GreenSock

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

Mouse Catch with some Math

Recommended Posts

Hey, just wanted to share a small fun pin i made today morning with you guys.. 

 

Greensock rocks things, and make so easy and smooth the animation, so you can focus on he rest of the codes always, and let Gsap do what he can best.

Btw. i  read about the pipe() and gsap.quickSetter() which maybe would make things even more smooth here ? Do you think it would make a big different?

 

Feel free to use this and or give feedback if you think things could be done better, smoother, cooler ! 

Thanks and Happy Tweening to you all ! 
 

See the Pen BaygzQV by themepunch (@themepunch) on CodePen

  • Like 3
Link to post
Share on other sites

Hey themepunch. Nice work! It looks good and appears to be well made.

 

3 hours ago, themepunch said:

i  read about the pipe() and gsap.quickSetter() which maybe would make things even more smooth here ? Do you think it would make a big different?

Pipe is more so a convenience method, I don't think switching to it would affect the smoothness. 

 

quickSetter could have an impact on performance depending on what you're using alternatively and how you're calling it. If you can create some quickSetters when it initializes (and perhaps resizes) and only funnel in values then that's where you'll get the best performance (meaning not having to create a new quickSetter each update). 

 

Based on a quick look at your code, using quickSetter wouldn't help too much. If you do tests with both versions I'd be interested in seeing the results though!

 

3 hours ago, themepunch said:

Feel free to use this and or give feedback if you think things could be done better, smoother, cooler !

Something that makes pens like this stand out is additional animation, such as the eyes blinking, nose twitching, wings flapping, some ability for interaction on click, etc. 

  • Like 2
Link to post
Share on other sites

Thanks for your feedback. Really appreciate the details about quickSetters !    Will give a go for it in my live project. 
And also i revisit  the pin soon to add some more effects to it. Love your ideas ! ;-) 
 

Link to post
Share on other sites
1 hour ago, ZachSaucier said:

Something that makes pens like this stand out is additional animation, such as the eyes blinking, nose twitching, wings flapping, some ability for interaction on click, etc. 


Just added Flattering Wings,  Red Eyes when you fly closer to the Guy and blinking eyes for the fly using following smart GreenSock Features:


To calculate the distance between two objects:
https://greensock.com/docs/v3/HelperFunctions and  https://greensock.com/docs/v3/Plugins/MotionPathPlugin


To get Number between a range from 0-1:
https://greensock.com/docs/v3/GSAP/UtilityMethods/normalize()

 

and to random blink the eyes:

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

Looks more fun now.  Btw. Zach. thanks again for your inputs, here is the Result:

See the Pen BaygzQV by themepunch (@themepunch) on CodePen

 

Cheers and Happy Weekend ! 

  • Like 2
Link to post
Share on other sites
On 1/31/2020 at 4:21 AM, themepunch said:

Btw. i  read about the pipe() and gsap.quickSetter() which maybe would make things even more smooth here ? Do you think it would make a big different?

 

quickSetter() can make a difference, but it's all in how you use it. Check out my quickSetter demo below. Notice how I do all the math calculations and style setting inside the ticker callback instead of the mousemove callback. That's key to making interactive animations smooth as event callbacks can fire multiple times before the next animations frame. Don't do the work until you need to. 

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

I didn't dig into your code, but your demo reminded me of something I made a while back. It's using an older version of gsap, but you might find some of the code useful.  

 

See the Pen qNPBpJ by osublake (@osublake) on CodePen

 

 

  • Like 3
Link to post
Share on other sites
On 2/1/2020 at 2:17 PM, OSUblake said:

 

quickSetter() can make a difference, but it's all in how you use it. Check out my quickSetter demo below. Notice how I do all the math calculations and style setting inside the ticker callback instead of the mousemove callback. 

 

Thank you very much for your feedback! Really appreciate it ! I have a good idea now  how to include quickSetter() into the pen.  Also curious how it will handle the easing in the setter, and how far we can "feel" the difference.

I love greensock ! Thanks for your hard work guys ! 

Link to post
Share on other sites
8 hours ago, themepunch said:

Also curious how it will handle the easing in the setter

 

In that quick setter demo, check out the calculations that use the speed variable. That makes it move like an exponential ease out.

 

The speed variable is the same as the ease variable being used in this video.

 

 

 

  • Like 2
Link to post
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.

×