bugfree

Doesn't really solve my 'problem' of doing what should be simple: setting an image to scale a little bit (which works flawlessly with 1 line of code) and then doing the exact same thing to an image that has been flipped using css. Every solution involves adding extra code to make the flipped image behave properly: canvas, set(), parent container, helper func, even my solution of scaling W&H adds in undesired extra code to make it work as intended, reducing the dynamic flexibility & minimalistic code I was hoping to achieve. I greatly appreciate the speed of which both Admin & Mod have responded to my questions & multiple solutions provided all do work as desired. I hope this thread can help someone else in the future who is also stuck wondering why their simple flipped image is not behaving as expected when scaled. EDIT: I do understand there are situations where flipping during animation is actually desired & it works great for that! Thanks again GreenSock - you guys rock!

Aargh, you did in 40 mins what i've been trying to do for DAYS.... and with canvas Thank you for the examples, that will really help. Thanks @OSUblake

But, I do not want the image to flip during animation, just to scale bigger or smaller, while in a pre-flipped state. That means changing both scaleX and scaleY simultaneously, not just one at a time & this goes for the matrix values as well. I am not interested in ranging from -1 all the way to 1, I just wanted myimage to grow and shrink a little bit eg: scale(1) to scale(0.8). This means it should tween from scale(-1,1) to scale(-0.8,0.8) & I cannot for the life of me find a dynamic way to do this. I am after the effect as seen on Heros #5 & #6 however they should be facing toward each other, not away (try loading without JS). This is getting horribly convoluted & escaping further from my imagined idea of applying a simple 'scale' to flipped & non-flipped images throughout the scene. Should I make this into a new thread? Since it seems the topic of this thread is unavoidable.

Why I do think it's possibly a bug: Applying scaleX() alone in the tween does not cause the upside down behaviour, it only happens if you use scale() or scaleY(). Manually adjusting the generated matrix value via console 'fixes' the 'problem' (until you scroll of course). Adding in scaleY() to the css has no effect on the generated matrix. Using matrix(-1, 0, 0, 1, 0, 0) in css instead of scaleX(-1) also has no effect on the generated tween matrix, which ends up having both X&Y values negative as per before, eg, matrix(-1, 0, 0, -1, 0, 0). Using TweenMax.set(element, {scaleX:"-1"}) also fails in a similar way, but slightly worse - now my image reverts to being rather fat looking... I ended up using different logic to scale my image - manipulating width&height instead of using scale - obviously this is not a very dynamic solution but it's the ONLY thing I could get to work with my css-flipped image. yep, yep, here is the codepen: (NB: Pasting a codepen URL in the middle of my post, autoloaded the preview & deleted all the text after the pen!) EDIT update (not shown in pen): Using transform:rotateY(180deg) in the css just removes the X axis from the equation - it still has unwanted flip. Removing the css flip and directly using set() to flip, causes the same unflip as per using rotateY() when scrolling. EVERYthing else I have tried gives the same result as shown in the pen.

1) horizontally flip an image using css transform:scaleX(-1); 2) apply "scale" or "scaleY" in the tween 3) ??? 4) the css scaleX(-1) makes the tween matrix X & Y values both negative = upside down image