Daniel Hult Posted November 5, 2019 Share Posted November 5, 2019 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 More sharing options...
OSUblake Posted November 5, 2019 Share Posted November 5, 2019 It returns an object with the blob's timeline, so you can tween the timeScale of that timeline. See the Pen 9ed878261204a9b81281d53621f2fe32 by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
Daniel Hult Posted November 5, 2019 Author Share Posted November 5, 2019 Awesome! Thanks again for your help 1 Link to comment Share on other sites More sharing options...
Daniel Hult Posted November 5, 2019 Author Share Posted November 5, 2019 @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 More sharing options...
ZachSaucier Posted November 5, 2019 Share Posted November 5, 2019 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 1 Link to comment Share on other sites More sharing options...
Daniel Hult Posted November 5, 2019 Author Share Posted November 5, 2019 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 More sharing options...
Daniel Hult Posted November 5, 2019 Author Share Posted November 5, 2019 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 More sharing options...
OSUblake Posted November 5, 2019 Share Posted November 5, 2019 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) 1 Link to comment Share on other sites More sharing options...
jonathanho16 Posted November 30, 2020 Share Posted November 30, 2020 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 More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 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? 1 Link to comment Share on other sites More sharing options...
jonathanho16 Posted November 30, 2020 Share Posted November 30, 2020 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 More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 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 More sharing options...
Sargis Abrahamyan Posted February 1 Share Posted February 1 hello, how can you make sure that the video link was a blob function, so you couldn’t download and watch the video? Link to comment Share on other sites More sharing options...
GreenSock Posted February 1 Share Posted February 1 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 More sharing options...
Sargis Abrahamyan Posted February 2 Share Posted February 2 I need it like this Link to comment Share on other sites More sharing options...
Cassie Posted February 2 Share Posted February 2 Oh, this is nothing to do with GSAP or this thread. You're talking about a video format, this is a thread about SVG animation. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now