Jump to content
Search Community

Flip element on motion path end

fluxus test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

Thanks for the demo.

 

I had success animating the smallBirdWrapper along the path and flipping the smallBird inside it.

To accomplish this I created one tween of the birdWrapper on the path.

 

I then built a timeline that used

 

-tweenTo() to play the motion path tween forward

-a tween to flip the scaleX of the smallBird (3D transforms aren't supported in all browsers for svg elements)

-another tweenTo() to play the path animation in the other direction

 

My demo

See the Pen PozxGaE?editors=0110 by snorkltv (@snorkltv) on CodePen

 

My complete tutorial on tweenTo() and tweenFromTo()

 

https://www.snorkl.tv/gsap-tweento-and-tweenfromto/

 

I had problems creating one tween to animate the bird on the path from start position to 0 to end position 1 and then having another tween animate on the path from start position 1 to end position 0 using the smallBirdWrapper as the target which is why I went with the tweenTo() approach.

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Hi @GreenSock

 

The pen below shows the problem I had earlier. I think I kind of know what is going (an additional offset is being applied) on but don't know what the proper way to fix it is. 

 

I just want the second tween to start at the end of the path and go back to the beginning. The second tween works as expected if the first tween is commented out.

 

Currently the second tween has a start value that is way over to the right.

 

See the Pen yLJQMPG?editors=0110 by snorkltv (@snorkltv) on CodePen

 

What's interesting to me is that in @fluxus original demo the path and align value are the same and this "issue" doesn't exist, but I wouldn't think of doing that.

  • Like 1
Link to comment
Share on other sites

@Carl You're aligning the motion path to the element being animated both times, so for the second tween it's aligning it to the end position of the first animation.

 

33 minutes ago, Carl said:

What's interesting to me is that in @fluxus original demo the path and align value are the same and this "issue" doesn't exist

That makes sense because the path isn't being transformed.

 

33 minutes ago, Carl said:

don't know what the proper way to fix it is. 

Don't align it to the container that moves :) 

  • Like 3
Link to comment
Share on other sites

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! 

  • Like 1
Link to comment
Share on other sites

41 minutes ago, fluxus said:

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? 

Because GSAP does a lot of work behind the scenes to normalize behavior across browsers and part of that is to use 2D transform matrices for SVGs. There are a slew of issues in Safari, Firefox, etc. that GSAP protects you from by doing so. And you can't have a 3D value in a 2D matrix. But you could totally get the same effect with a negative scaleX, as Carl demonstrated. 

  • Like 3
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.
×
×
  • Create New...