[Curated Collection of GSAP Examples for Inspiration, with Code?]

Just to chime in, this guy has some nice GSAP examples - https://codepen.io/cameronknight

 

Nothing too code heavy, yet quite nice effects!

[Flip element on motion path end]

Thx to all for your responses. I need some time to digest all solutions 😅 , I am primarily a designer.

 

At first glance @GreenSocksolution with scaleX seems the most elegant looking at it now. 

 

Just two quick questions more please.

 

1. How come that CSS transform applied to wrapper element works and the same thing applied with GSAP doesn't? I get that 3d transforms are not supported in all browsers, but if it works with CSS then it should with GSAP, right? 

 

2. If someone can point me to a nice thread regarding infinite loop with ModifierPlugin that is also responsive? I don't need any Codepen's, you've all already been super helpful! 

[Flip element on motion path end]

Hola!

 

What is the proper way to flip element when using MotionPathPlugin ? Like a car driving in one direction, when reaches the end of the road it turns and goes back to start.

 

I tried with different settings for autoRotate, but can't get it to work. In the end I managed it with adding/removing CSS classes using call().

 

P.S. searching the forum returned this 

See the Pen MWyVELQ by mikeK (@mikeK) on CodePen

among others, but I think there must be a more natural way of doing this. 

P.P.S. 

I made a simple Codepen, the two birds are animated along a path and using CSS to flip when needed.

 

Thanks,

Mirko

See the Pen rNLQLJK by fluxus (@fluxus) on CodePen