Jump to content
Search Community

Tweening to a progress of an animation and back.

chalkytannins 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've been playing with the morphsvg bow and arrow demo:



I was trying to get a wiggle strain when the bow was fully pulled, and using CustomWiggle and rotation with easeInOut produced some cool results, but I was trying to get the Bow and string to relax part of the way back to the relaxed/straight state. 


Is there anyway to animate a wiggle ease in and out partway back through an animation?



See the Pen epZyEK?editors=0010 by chrisgannon (@chrisgannon) on CodePen

Link to comment
Share on other sites

Sorry, I'm not understanding the effect you are going for. 


The short answer is yes, you can tween the progress() of any animation and even apply an ease.

//so you can have your source animation be something like:
var t = TweenLite.to(obj, 4, {x:500, ease:Linear.easeNone});

//and then tween the progress() of that tween with another tween with its own ease
TweenLite.to(t, 1, {progress:0, ease:Power4.easeOut});

Here is a more elaborate example: http://codepen.io/GreenSock/pen/YwOWmQ



With CustomWiggle you can apply any ease, even a CustomEase to the amplitudeEase and timingEase properties.

Try changing those values in this demo:



I think if you step away from the complex bow and arrow example and provide a simpler demo with a CustomWiggle close to what you want, we will have a better chance at getting you a clear solution.

  • Like 3
Link to comment
Share on other sites

Here's sort of what I've been working towards, but I'm not sure how to execute it. I know it must be possible, and i'd much rather do it this way, rather than have to open Illustrator back up and slip in a keyframe to animate back and forth from.


See the Pen WpmXjw by chalkytannins (@chalkytannins) on CodePen



Initially I tried adding a onComplete function into my var archeryTl = new TimelineMax({onComplete:myFunc});


and then running myFunc to pass the TweenLite.to(archeryTl, 1, {progress:0.2, delay:2, ease:"Expo.easeOut", repeat:2,yoyo:true});


But I seem to be tripping up on how the timeline is handled. 


The end goal is to have the shaking fractional tween to repeat until some event fires to finish the animation and shoot the arrow.


Thanks so much.


Edit: Figured out I need TweenMax.to for the animations to repeat.

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