Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
timirila

Problem with progress

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:

 

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

  • Like 2
Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 6
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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