Jump to content
GreenSock

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

Blob animation on hover

Recommended Posts

Hey guys,

I recently saw @OSUblake blob animation with GSAP and wanted to expand on it by making it start moving when I hover an element. So by default the blob stands still, and when you hover an item it starts moving..

I attached a CodePen with the code and what Im trying to do. Is it possible to start the GSAP animation inside the eventlistener here? :) 

See the Pen vYYdJXv by daniel-hult (@daniel-hult) on CodePen

Share this post


Link to post
Share on other sites

Awesome! Thanks again for your help :D 

  • Like 1

Share this post


Link to post
Share on other sites

@OSUblake Hey again,

Your solution worked nice! Just one more question - on the very first hover it takes a little second for the animation to start, but after that it animated quickly when hovering. Is it possible to "make it ready"/run the initial function before you start hovering so it starts instantly?

Share this post


Link to post
Share on other sites
47 minutes ago, Daniel Hult said:

on the very first hover it takes a little second for the animation to start, but after that it animated quickly when hovering. Is it possible to "make it ready"/run the initial function before you start hovering so it starts instantly?

That's likely your eyes playing tricks on you - the time it takes for it to animate to a timeScale of 1 is constant (2 seconds). But something to decrease the perceived time would be to apply an ease to the tween that does the time scaling. Something like ease: Power4.easeOut helps out a lot :) You can play around with eases using GreenSock's ease visualizer: https://greensock.com/docs/v2/Eases

Share this post


Link to post
Share on other sites

It probably doesn't take extra time to start it, but it definitely does takes longer time for it to move from initial state to another state than if it is already at one state and you hover over the trigger again 🧐

Share this post


Link to post
Share on other sites

Take a look here and maybe it's easier to see what I mean:
https://www.loom.com/share/f5915c08ab91417eab01f200b89661de


When I first hover the trigger, it takes a little while for it to go from the initial state to the next path. After it's already been hovered, when you hover again it changes almost instantly.

I updated the time for the timescale to 0.3s so it's quicker :) 

Share this post


Link to post
Share on other sites

I can't tell if it's taking longer to start or not. I use negative start times, so maybe that has something to do with it. Maybe try giving it some random time to start at.

tl.progress(1).progress(0).timeScale(0).time(4)

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×