Flip TweenMax Bezier Direction

[FarukHarmanli]

Hi All, I need some help to use Waving 3d shaded flag example. I want to filp left flag and bezier animation direction. Anybody can help me? Thanks in advance. 

See the Pen KrnGq by nrose (@nrose) on CodePen

[Jonathan]

Hello FarukHarmanli, and welcome to the GreenSock Forum!

 

That example does not look like it is working.

 

But you will have to first flip the image horizontally in Photoshop.

 

You could try just rotating the whole image and use backface-visibility:visible; on the whole image but its better to flip the image horizontally in a photo editor and then go from there to adjust  the rotationY value.

 

And then make sure all the CSS and JS is flipped as well for the rotationY values. But the first step is to flip the image horizontally so the image is in the right position, so the flag pole is on the other side so the flag has room to wave.

 

[PointC]

Hi FarukHarmanli 

 

Welcome to the GreenSock forums.

 

The demo is loading GSAP 1.18 via the 'latest' link. If you add GSAP via the CodePen interface, you can add 1.19.0 and it all seems to work correctly.

 

My 2 cents worth for your image flip: a fast and easy way to flip the sock waving to the left would be to scale your container. Please try adding this line at the beginning of your JS.

TweenMax.set("#container", {scaleX:-1})

Hopefully that helps a little bit.

 

Happy tweening.

[Jonathan]

Nice solution PointC.. The reason i didnt recommend a negative scaleX is so you dont have to worry about rotating the large images main container since that is your main anchor so to speak. And will just allow you to animate the green sock instead of the whole image and will give you one less transform to have the browser paint.

 

In that case using PointC solution you could just wrap an inner div inside the #container div and set that to position absolute and then add scaleX on that .. this way your main container is untainted by transforms. But dont forget to add position relative to your #container div.

 

Like this so it aligns to the right without a float or using a negative translateX.

 

See the Pen yJwjGr by jonathan (@jonathan) on CodePen

 

But flipping the image horizontally and re configuring the bezier values will take more time but will help long term cross browser so you dont have to transform such a large image, and will only apply transforms to the GreenSock green sock.

 

Nice Job PointC, your 2 cents were worth a dollar

[FarukHarmanli]

Thank you very much PointC, it works very well. Take care