Jump to content
GreenSock

FarukHarmanli

Flip TweenMax Bezier Direction

Recommended Posts

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

Link to comment
Share on other sites

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.

 

:)

  • Like 1
Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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

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