Jump to content
Search Community

Problem with progress

timirila test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have some troubles with progress and totalProgress methods.


When you hover wave, penguin will go to your cursor position.


I want: if cursor position to the left than penguin, penguin must follow by cursor, but now his animation continues.


Also I need that penguin make backflip when his position and cursor's position are equal. Also when cursor leave wave picture, he must go on the top of the wave and drifting on the waves. But all of it after.


Thank. Sorry for my English.


See the Pen gaeoEy by anon (@anon) on CodePen

Link to comment
Share on other sites

hi and welcome to the GreenSock forums,


I'm having trouble understanding what you need to do, and it seems like some of it is beyond the type of help we offer.

This seems like something that will be difficult to do with multiple pre-made timelines like you have in your demo. 

For having the penguin surf to where your mouse is, maybe this will help:



  • Like 2
Link to comment
Share on other sites



I have Babel set as the default preprocessor so it always uses that, although I actually code everything TypeScript. Using TypeScript on CodePen is nearly impossible so I have to convert everything to something can be used by Babel or plain JavaScript if I'm helping somebody out on the forums. ES6 has a lot of nice shorthand, saving you some time. Notice how you don't have to repeat yourself if something has the same name.

var x = 100;
var y = 100;
var ease = Back.easeOut;
var name = "Viola Case";

// With ES6
TweenLite.to("#box", 1, { x, y, ease, onComplete: () => console.log(`Hello ${name}. How are you?`)});

// No ES6
TweenLite.to("#box", 1, { x: x, y: y, ease: ease, onComplete: function() {
  console.log("Hello " + name + ". How are you?");
Link to comment
Share on other sites

Thanks for this info OSUblake. Clear.


Suggestion for elaborating this pen: If it isn't too hard to code and you have some time maybe it's nice to flip the penguin pic so that it's nose is looking west if mouse moves west (with some nice roll perhaps when initially changing mouse direction).

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