fluxus Posted November 10, 2020 Share Posted November 10, 2020 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 1 Link to comment Share on other sites More sharing options...
Carl Posted November 10, 2020 Share Posted November 10, 2020 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. 4 Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2020 Share Posted November 10, 2020 Here's another option that uses Carl's clever scaleX flip idea: See the Pen 2d5065165a6ca82dcd7a2ba6a80a1db4?editors=0010 by GreenSock (@GreenSock) on CodePen There are actually a bunch of ways to do this - let us know if this works fine for you or if you need more options. Happy tweening! 5 Link to comment Share on other sites More sharing options...
mikel Posted November 10, 2020 Share Posted November 10, 2020 Hola! @fluxus, 'There are actually a bunch of ways to do this ...' See the Pen d0936c3a8de1f233e1cdbb60c6a36dc0?editors=1010 by mikeK (@mikeK) on CodePen ... and just for fun - no flip See the Pen OJXRyYN by mikeK (@mikeK) on CodePen Happy flipping ... Mikel 5 Link to comment Share on other sites More sharing options...
Carl Posted November 10, 2020 Share Posted November 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2020 Share Posted November 10, 2020 @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 3 Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2020 Share Posted November 10, 2020 You could align it to the path itself instead of the bird. Maybe this is what you were looking for? See the Pen 42d3de934c1e7197627e97e0d0fc6dc4?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Carl Posted November 10, 2020 Share Posted November 10, 2020 thanks @ZachSaucier and @GreenSock it makes sense now. I had my thinking flip-flopped. I thought "align" was for the thing you wanted stuck to the path. not the path you wanted things aligned too. I should have watched the video in the docs first. It cleared it all up. 1 Link to comment Share on other sites More sharing options...
fluxus Posted November 10, 2020 Author Share Posted November 10, 2020 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! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2020 Share Posted November 10, 2020 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now