Mirror Effect In GSAP

[schtew]

Hey all, I'm looking to create a mirroring effect at the end of my animation, such that the image would flip over the y axis by the end of the animation. Something like 

transform: scaleX(-1)

which triggers on every animation repetition.

 

In other words, consider this example: A shark image moves to the right, flips, goes back to the left, flips again, and repeats. Seems pretty simple but I don't know of any built in functionality with GSAP that can accomplish the desired. Any suggestions?

 

Thanks!

[Rodrigo]

Hi @schtew and welcome to the GreenSock forums!

 

You should take a look at the CSS Plugin docs:

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

You can definitely tween scales with GSAP

gsap.to(element, {scaleX: -1});

Hopefully this helps. If you have more questions, please remember to include a minimal demo.

Happy Tweening!