Jump to content
Search Community

run code on repeat

drewbit 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 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!

 

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

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

 

 

 

Link to comment
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!

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