Jump to content
Search Community

Infinite Easing for jetpack-dude

katerlouis test
Moderator Tag

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 a pixelated jetpack-dude and want to create the illusion the he is flying. a huge background is animating from top to bottom. So the jetpack-dude needs to get shaken by the air left and right and up and down, like he struggles to stay keep track and can't control the rockets below.

 

No rotation though; this ruins the pixel look. I only need a kinda randomized tween of x and y around his starting point and ideally keep going back to his starting point whenever the tween gets paused()

 

Question:
1) I just can't come up with a convincing easing.. dunno why I'm struggling with this so badly oO
2) How can I express "go from y: 0 > y: 5 > y: -5 > y: 0, with a single tween? (I remember there was a similar issue in the past, but just couldn't find it anymore)

 

Bonus:
3)
The tween will get stopped by the user at some unknown point, and I need the dude to be at the exact position where he started. Is there something like 
"Pause tween after the repeat is finished?"

 

I could add a tween.eventCallback("onRepeat", function() { tween.pause() }) 
but that will break the loop when the tween gets played again.

 

 

Thanks!

See the Pen gWqver by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

These are all great solutions, and traditionally I would recommend the same approach of creating a function that creates a random motion tween that calls the function again using onComplete.

 

However, CustomWiggle can do a lot of this with very little code.

 

A CustomWiggle always returns back to the start values.

https://greensock.com/customwiggle

 

This demo should provide constant random movement and return to normal position on pause. You can easily change the number of wiggles and adjust the max distance he travels (change x and y in tweens).

See the Pen eWxXBX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also check out random swarm which was accomplished using the same basic technique

 

See the Pen wzkBYZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 7
Link to comment
Share on other sites

Hell yeah, I knew it! I knew there was an easier way.

Thank you sooo much, Carl. 

GSAP is worth way more than you guys charge.

 

One more question:

Can I tween y: "+=290" of .dudewhile the wiggle tweens the same y?

Or do I need an extra wrapper for this? My quick tests didn't work–

 

Another question:

Carl handled going back to default by hardcoding a tween y:0, x:0.

There must be a way to do the following on click:

"Finish this repeat, and then stop, but go on repeating once you play again"

 

// Something like
tl.pauseAfterJustThisRepeat();

 

 

(Background of these questions: at some point the .dude has to stop wiggling and slightly float, and then leave fly out of the screen, while wiggling)

  • Like 1
Link to comment
Share on other sites

Happy to help.

 

No, you can not have 2 tweens trying to change the y of the same target at the same time. Use a wrapper.

 

Yes, you can use an onRepeat callback to check if someone hit the pause button, but that would only fire every 2 seconds (based on the duration of the tween in my demo). 

 

 

Another option is just to tween the time of the wiggle timeline back to 0 very quickly. try using this in my previous demo:


 

$(".dude").click(function(){
    if(!tl.paused()){
        tl.pause();
        // tween the time() back to 0
        TweenLite.to(tl, 0.2, {time:0})
    } else {
        tl.play();
    }
})

 

  • Like 3
Link to comment
Share on other sites

Nice approach Carl! 

You got me on the right road to achieve exactly what I'm looking for :) 

 

Tweening to 0 tweens the timelines playhead backwards. In this wild wiggle case it won't matter at all; but I'm curious how to achieve tl.pauseAfterJustThisRepeat() would work for other scenarios.

How about this?

 

tl.pause()
// Exact duration the timeline would have needed to end the current repeat
var duration = tl.duration() - tl.progress() * tl.duration();
TweenMax.to(tl, duration, { time: tl.duration(), ease: Power0.easeNone })

 

See the Pen QvoQxp by katerlouis (@katerlouis) on CodePen

 
 
I know you guys don't recommend enhancing the TimelineMax.prototype object,
so do you think this little function is worth considering to go into the main build?
 
Let's call it tl.pauseAfterRepeat()
Link to comment
Share on other sites

Yeah, that seems to be a sound approach. Nice job.

If you're timeline is set to yoyo:true and you click the red button during the yoyo (backwards) phase it immediately changes direction and moves forward.

Your method works for your particular case, but there are different use cases to consider when adding methods like this and how to make them flexible enough to make sense for everyone. 

 

We're pretty protective of the filesize of the tools and usually only add to the API unless there is a large need for a feature that can't easily be accomplished with the existing methods available. In this case it doesn't seem to be something that comes up often but we'll keep our eyes and ears open. Thanks for the suggestion.

 

 

 

  • Like 2
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...