Problem with progress

[timirila 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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:

 

http://codepen.io/GreenSock/pen/jbzpdX?editors=100

[timirila 0 Likes (Newbie)]

I wanted something like this, but how i can make that penguin swims with certain speed from one cursor position to next position.

I edited my demo for more understanding, I hope it help.

Thank you! 

[Carl 9,066 Likes (Superhero)]

in order to have the creature animate at a constant rate, as opposed to directly matching the x of the mouse, you can use TimelineMax's [docs id=js.TimelineMax.tweenTo()] method like

bezierTween.tweenTo(time, {ease:Linear.easeNone}); //try a different ease like Power1.easeOut

http://codepen.io/GreenSock/pen/jbxEvO?editors=001

[Shaun Gorneau 1,503 Likes (Superhero)]

I'm don't fully understand what your asking for, but I think this should help.

 

See the Pen eprmbd by sgorneau (@sgorneau) on CodePen

[OSUblake 9,990 Likes (Superhero)]

I was playing around with Shaun's demo and couldn't resist... Here's your wave animated with Pixi. It would actually look better if your graphic wasn't already in the shape of wave.

 

See the Pen EVLXZM by osublake (@osublake) on CodePen

[timirila 0 Likes (Newbie)]

Thank you very much guys!

[Shaun Gorneau 1,503 Likes (Superhero)]

I was playing around with Shaun's demo and couldn't resist... Here's your wave animated with Pixi. It would actually look better if your graphic wasn't already in the shape of wave.

 

See the Pen EVLXZM by osublake (@osublake) on CodePen

 

Now that's just cool  

[violacase 17 Likes (Newbie)]

Hey OSUblake.

 

Great pen!

 

I noticed many of your pens use Babel as a preprocessor. I'm curious what's the main reason you're using this one and not another? Running Ecmascript6 in older browsers?

[OSUblake 9,990 Likes (Superhero)]

Thanks!

 

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?");
}});

[violacase 17 Likes (Newbie)]

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