ws488 Posted December 9, 2020 Share Posted December 9, 2020 (edited) 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 December 9, 2020 by ws488 further clarify my query Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 9, 2020 Share Posted December 9, 2020 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? 1 Link to comment Share on other sites More sharing options...
ws488 Posted December 9, 2020 Author Share Posted December 9, 2020 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 More sharing options...
ZachSaucier Posted December 10, 2020 Share Posted December 10, 2020 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 More sharing options...
MikeGajdos Posted September 4, 2021 Share Posted September 4, 2021 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 More sharing options...
GreenSock Posted September 4, 2021 Share Posted September 4, 2021 If I understand your question correctly... let tween; function createTween() { let progress = 0; if (tween) { progress = tween.progress(); tween.kill(); } tween = gsap.to(..., {motionPath: {...}}); tween.progress(progress); } createTween(); window.addEventListener("resize", createTween); Does that help? 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