Motion path won't resize

[flowen]

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

[mikel]

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

 

[ZachSaucier]

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.

[flowen]

@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 !

[mikel]

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

 

 

[flowen]

thank for the great examples @mikel !