Jump to content


Resizing animation on MotionPath (with use of ScrollTrigger), trying to make responsive page

Recommended Posts

Hi There,


I've been reading the GSAP documentations and studying some of the codepen examples for a few weeks now to try to figure out and understand how to use MotionPath and ScrollTrigger but wasn't able to figure out how to make what I need responsive.


I have basic knowledge of HTML & CSS, currently figuring out JS along the way.


I've been referencing one of your codepen examples Running Tractor, as its more or less what I need my animation to do. I have a paper plane png that will be flying along a dashed svg path. I was able to get it work from your running tractor example to fly through the entire svg path (in full laptop web browser size) but now struggling to figure out how to resize my paper plane png to make it responsive (based on viewport size). I see that in the running tractor code, there's a scale of 0.7, but is there a way to make scale automatic and also stop the paper plane png from running off the svg path? I've tried to play around with media queries for the image but that didn't work as it messed up on the svg path (doesn't start from the beginning and doesn't end at the end).


Thank you.

See the Pen wvzzMdR by winceshum (@winceshum) on CodePen

Edited by ws488
further clarify my query
Link to comment
Share on other sites

Hey ws488 and welcome to the GreenSock forums. If you're going to use alignOrigin I don't think you need the transformOrigin. Then you can set the width however you'd like to. For example:

See the Pen GRjjMZL?editors=0010 by GreenSock (@GreenSock) on CodePen


Does that answer your question?

  • Like 1
Link to comment
Share on other sites

Hi Zach!


Thanks for replying. No, it seems like codepen automatically reduces the size of the animation image png automatically but when I tested it on my own code editor, it doesn't work. What I need is a way to resize the animation image png based on the browser size (make it responsive) while it still working properly on the SVG path (which does resize on its own) starting and ending at the beginning and end of the svg path. My current fix to the problem is setting a if/else if/else statement with browser breakpoints and I sent different scale sizes for each statement. I guess there's no auto resizing option?


Link to comment
Share on other sites

I think you need to be more specific in your description. Are you saying that you want the MotionPath itself to resize if someone resizes their browser after the page has loaded? If so, no, there's no auto-resize as stated in the documentation. With that being said you can kill off the old MotionPath tween and recreate it on resize as needed. It might be good to throttle that event so it only does so when a user has more or less finished resizing the page. 

Link to comment
Share on other sites

  • 8 months later...

Hi there guys, 

 I would just like to Zach how to kill old MotionPath tween and recreate it on resize as needed. Still not sure hoe to do it. Any guidance would be massively appreciated.

Link to comment
Share on other sites

If I understand your question correctly...

let tween;

function createTween() {
  let progress = 0;
  if (tween) {
    progress = tween.progress();
  tween = gsap.to(..., {motionPath: {...}});
window.addEventListener("resize", createTween);

Does that help?

  • Like 1
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.