Jump to content
GreenSock

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

Link to comment
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?

Link to comment
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

  • Like 1
Link to comment
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 ?

Link to comment
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 :) 

Link to comment
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)

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hi, I am very new to GSAP and I have a little bit of experience with PIXI.js.  Is there a way to convert  the resulting GSAP animation to a PIXI.js animated sprite? I am trying to have the blob show a video playing behind another video. Any help will be greatly appreciated.

On 11/5/2019 at 5:38 AM, Daniel Hult said:

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? :) 

 

Link to comment
Share on other sites

Hey @jonathanho16 and welcome to the GreenSock forums.

 

24 minutes ago, jonathanho16 said:

Is there a way to convert  the resulting GSAP animation to a PIXI.js animated sprite?

Why? Why not just have layers of animation? Why do you need to use Pixi for the sprite? 

  • Like 1
Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Why? Why not just have layers of animation? Why do you need to use Pixi for the sprite? 

The reason I want to use pixi js is that I want to have the blob follow the mouse, and I am already using pixi on the rest of the site for other animations and I am comfortable with it. Unless the that behavior is already possible directly through GSAP.  I am trying to recreate the header animation from https://www.pixijs.com/

Link to comment
Share on other sites

5 minutes ago, jonathanho16 said:

I am trying to recreate the header animation from https://www.pixijs.com/

That's quite different than what this pen is doing, though some of the concepts are the same. Unfortunately we don't have the capacity to create a tutorial for how to create that sort of thing. If you have a specific question we're happy to help.

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