Jump to content


FrameForwardPlugin and FrameBackwardPlugin multiple loop on total number of frames

Recommended Posts

Hello GreenSock,

first of all, thank you for this wonderful suite you've created!


Second, my problem.

I have a clip which has 37 frames and i need to loop it forward or backward for 3 times, starting everytime from a different frame, and ending the triple loop on the same frame where i started.


I will post you a super-simplified version of my code in which i try to set the final frame for both the forward and the backward animations, making a check to avoid passing non-existent frame 0 or frame 38 to the plugin (i obviously imported the greensock classes and activated both the FrameForwardPlugin and the FrameBackwardPlugin):


var nRound:int = 0;
var totRounds:int = 2;
var completeRoundFrames:int;
var clipRound:TweenLite;

var direction:String = "forward"; //can be "forward" or "backward"

if(direction == "forward") {
	completeRoundFrames = (clip.currentFrame - 1) == 0 ? 37 : (clip.currentFrame - 1);		
	clipRound = TweenLite.to(clip, 6, { frameForward:completeRoundFrames, ease:Linear.easeNone, onComplete:loopRound } );

} else if (direction == "backward") {
	completeRoundFrames = (clip.currentFrame + 1) == 38 ? 1 : (clip.currentFrame + 1);
	clipRound = TweenLite.to(clip, 6, { frameBackward:completeRoundFrames, ease:Linear.easeNone, onComplete:loopRound } );		

function loopRound():void {
	if (nRound < totRounds) {
		trace("ROUND N." + nRound + " COMPLETED");


In this way the loop is working, but when it reaches the end of the animation and starts the following one, there's a little glitch because every animation ends one frame before (in case of forward) or one frame after (in case of backward) the original frame of the clip. Also the final animation (third phase of the loop) stops on a different frame (+1 or -1) than the original one.


I've tried passing as the frame parameter for both the forward and backward animations the clip.currentFrame, but in this case the animation won't even start!


I might have explained the problem not so well, but i hope you can give me some advice!


Thank you very much!

Link to comment
Share on other sites

I just updated the attached FrameForwardPlugin.as file to accommodate relative values in v12 - would you mind giving it a shot? So, for example, if you want to loop it 3 times from wherever it's at in the forward direction, you could do this:


TweenLite.to(mc, 6, {frameForward:"+=" + (mc.totalFrames * 3), ease:Linear.easeNone});

Which means that if your mc is 100 frames long, it's like doing this:


TweenLite.to(mc, 6, {frameForward:"+=300", ease:Linear.easeNone}); 

and to go backward, you can do the same thing and use -= as the prefix (actually, it'll even work with += and figure out the difference and plot the correct course backwards):


TweenLite.to(mc, 6, {frameBackward:"-=300", ease:Linear.easeNone});

Does that give you the result you were after?


  • Like 2
Link to comment
Share on other sites

Dear Jack,

first of all thank you so much for spending some of your precious time to update the plugin!

I wouldn't have expected better, and this is the umpteenth confirmation of your kindness and astonishing support ^_^


As for my question, I'm now switching my entire project to the v12 classes: i'm a long time user of the v11 suite and this update gives me the opportunity to take some time for improving my code and diving into the new version of GSAP!


As soon as i will try the modified FrameForwardPlugin i will post here the results!

Thanks again!!!

  • Like 1
Link to comment
Share on other sites

Dear Jack, hello again!


Just dropping a line to make you know the updated plugin works PERFECTLY with GSAP v12 and the relative values as you explained in your previous post.

You should definetly put it in your next release!


Now i'm studying all the new features of v12 and i can tell you i love it!

I already found a lot of ways to optimize my old code: the tools are really powerful and i'll try to dig thru them at my best!


Cheers and keep up the good work!!!

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