drewbit

run code on repeat

Recommended Posts

I have the following code:

 

TweenMax.to($("#octopus"), 4, {x:'+=' + (screen.width() - $("#octopus").width()*0.8), 
            repeat:-1, yoyo:true,ease:Linear.easeNone,delay:0.3,onComplete:function(){
                $("#octopus").toggleClass("flip");
            }});

the onComplete never runs as it is an infinite loop, but I'd like to toggle a class while the animation is reversing and then again before it runs.

 

Will I need a play / reverse loop for this or is there a way to run code before each leg of a yoyo?

 

Thanks!

 

Share this post


Link to post
Share on other sites

Ahh, thanks.I couldn't find that in the getting starting guide and the API doesn't seem to have a search, unless I'm missing it. 

Share this post


Link to post
Share on other sites

Ok, so I have the following class defined in my CSS:

 

.flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

If I add this to an image, the image flips horizontally as expected.  If I add the class dynamically in the onRepeat function, it doesn't flip.

 

I can see the class getting added and removed during animation in the inspector, but the image doesn't flip.

 

Is something in the animation stopping it or something else I'm missing?

 

EDIT: trying to put up a fiddle here now...

Share this post


Link to post
Share on other sites

GSAP applies inline-styles that are going to be more specific than your rule and thus override it.

 

You can use clearProps:"all" to get rid of all the GSAP inline-styles or certain ones when a tween ends or at any point in time using set(). (see CSSPlugin docs for more)

//remove translateY transform AFTER tween completes
TweenLite.to(element, 1, {x:200, y:100, clearProps:"y"});

//remove all styles AFTER tween completes
TweenLite.to(element, 1, {x:200, y:100, clearProps:"all"});

remove all styles on demand, instantly
TweenLite.set(element, 1, {clearProps:"all"});

remove only left and width specific styles instantly
TweenLite.set(element, 1, {clearProps:"left, widthl"});

Also, if you are using GSAP, you don't really need to be applying a class in order to get your element to flip, you can just use a TweenLite.set() (tween with a 0-second duration). I understand that perhaps you have a good reason. Just putting it out there.

 

 

 

Share this post


Link to post
Share on other sites

ah, ok it seems now that your issue relates to the fact that the scaleX is being recorded in the full Matrix2D props and you are trying to externally alter those values.

  • Like 1

Share this post


Link to post
Share on other sites

ah, ok it seems now that your issue relates to the fact that the scaleX is being recorded in the full Matrix2D props and you are trying to externally alter those values.

 

Bingo. I switched to animating the 'left' property and it works as expected.  Thanks for pointing that out!

Share this post


Link to post
Share on other sites

Using a timeline is probably the easiest approach:

 

http://jsfiddle.net/45C6C/1/

 

Timeline it is! I haven't tried using timelines yet, still playing with the straight .to but this does the trick nicely.

Share this post


Link to post
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.