flowen Posted December 19, 2019 Share Posted December 19, 2019 Another motion path issue, this time with a codepen So I have this fartpillow animating in from the right (outside of the screen) triggered by an intersection observer. On smaller screens the fartpillow jumps out of the screen and I can't seem to get the motion path resize correctly. The final implementation is in React, but I'm using pretty much the exact same code from this prototype. One of the challenges is that I want the animation to start outside of the container as well, but I somehow (not sure how) fixed this. Just thinking ahead that this might be another challenge if the path fits to size within the container. See the Pen VwYpvoq?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted December 19, 2019 Share Posted December 19, 2019 Hey @flowen, Unfortunately, the result of the MotionPathHelper is not responsive. I am sure that this was also noted somewhere in the DOCS - but cannot find the clue. How about calculating the bezier points yourself: See the Pen xxbgeyN by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 19, 2019 Share Posted December 19, 2019 As mikel said, MotionPathPlugin doesn't automatically resize. You'd need to destroy the old path and create a new on on resize as needed. However it seems that your SVG isn't positioned and sized to be responsive at the moment. Resizing the browser and re-running the page doesn't cause the path to change size at all. If you set it up correctly to do that then making it responsive (by destroying and recreating) is easy. 1 Link to comment Share on other sites More sharing options...
flowen Posted December 20, 2019 Author Share Posted December 20, 2019 @mikel didn't know that was possible! Interesting way to approach, though I don't understand the creation of the path (yet). Although for now I've seemed to have fixed it by making the svg responsive. The reason why my svg wasn't responsive is that React was removing the 'viewbox' attribute. It was supposed to be 'viewBox'. Took me half a day to find as there was no error ? also thanks @ZachSaucier ! Link to comment Share on other sites More sharing options...
mikel Posted December 20, 2019 Share Posted December 20, 2019 Hey @flowen, The construct of a 2-point bezier is not that difficult. Try different curve and end points as well as values for curviness (between 1 and 2). This example also includes the 'resizeCheck' function. See the Pen poveLRo by mikeK (@mikeK) on CodePen And here is an alternative to the Bezier curve. Based on a pen from @OSUblake: The SVG delivers the responsiveness, modifier and Math.cos the cool curve. See the Pen KKwWBrV by mikeK (@mikeK) on CodePen Happy curving ... Mikel 4 Link to comment Share on other sites More sharing options...
flowen Posted December 24, 2019 Author Share Posted December 24, 2019 thank for the great examples @mikel ! 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