Zeyi Posted September 7, 2020 Share Posted September 7, 2020 (edited) Hello, I was wondering if is possible to change the direction in which 2 paths are being morphed. Currently, my path is being morphed from left to right, which doesn't look that great. Is it possible to modify it so that it starts morphing from the center and expand outwards? The link to my animation is https://codesandbox.io/s/confident-violet-lywmu?file=/src/Animate.js See the Pen Animate.js by s (@s) on CodePen Edited September 7, 2020 by Zeyi The Codepen URL did not display Link to comment Share on other sites More sharing options...
Richard1604 Posted September 7, 2020 Share Posted September 7, 2020 hello zeyi, that's a very nice animation that you are working on. i have a few simple suggestions that might be helpful: a) play the timeline in reverse: tl.reverse(0); b) reverse the direction of the path using an editor like Inkscape c) try using the progress() method d) switch between from() and to() methods 3 Link to comment Share on other sites More sharing options...
Zeyi Posted September 7, 2020 Author Share Posted September 7, 2020 Thanks Richard. Will give it a try. Link to comment Share on other sites More sharing options...
mikel Posted September 7, 2020 Share Posted September 7, 2020 Hey @Zeyi, More suggestions: you could use linear or rotational morphs or custom origins and findMorphOrigin () - more here in the docs. Or you can partially open up the area so that the individual areas can be animated better. See the Pen jOqYXrE by mikeK (@mikeK) on CodePen See the Pen bGpaOYG by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 4 Link to comment Share on other sites More sharing options...
Zeyi Posted September 7, 2020 Author Share Posted September 7, 2020 Thanks Mikel, findMorphOrigin was very helpful. It helped me visualize that only the left shape is the one expanding to to the new shape, while the other two were trying to scale to 0. I fixed my problem by morphing it into a centered circle first, then with this new shape morph back into my desired shape. 1 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