Jump to content
Search Community

Blob animation on hover

Daniel Hult test
Moderator Tag

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

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

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

  • 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

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

  • 3 years later...
3 hours ago, Sargis Abrahamyan said:

hello, how can you make sure that the video link was a blob function, so you couldn’t download and watch the video?

I read your question a few times and I don't understand what you're asking, @Sargis Abrahamyan. Can you please clarify? It's probably best for you to create a new thread instead of hijacking one that's 3 years old. 🙂

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.
×
×
  • Create New...