dotun12 Posted March 31, 2020 Share Posted March 31, 2020 Hi there, I am trying to make a div(#rec) follow an svg path with I did in my below code but, I want the div to follow down, as I scroll down and follow back up as I scroll up, I will appreciate if you help work on the code below, Thanks https://codepen.io/onseyi/project/editor/DeWepm <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin:0; width: 100%; height: 3000px; background:#dfdfdf; overflow-x: hidden; } #rec { position: absolute; width: 150px; height: 100px; background-color: #8894aa; } </style> </head> <body> <div id="rec"></div> <svg fill="none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1300 3000"> <path id="path" d="M143.78,431.83c103.76,235.99,223.54,324.48,318.04,360c143.34,53.87,223.51-16.03,379,51.84 c136.54,59.6,292.87,208.71,272.99,325.44c-25.74,151.18-320.87,94.36-612.23,336.96c-155.68,129.63-367.75,392.59-331.29,624.96 c43.59,277.79,443.64,520.03,985.93,492.48" stroke="black" stroke-width="8"/> </svg> <script src="gsap.min.js"></script> <script src="MotionPathPlugin.min.js""></script> <script> gsap.registerPlugin(MotionPathPlugin); gsap.set("#rec", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); gsap.to("#rec",{duration:5, motionPath:{ path:"#path", autoRotate: true } }); </script> </body> </html> index.html Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 31, 2020 Share Posted March 31, 2020 Hey dotun. Welcome! You can animate an element along a path on scroll using a method like this: See the Pen zYGboPp?editors=0010 by GreenSock (@GreenSock) on CodePen You'll have to handle resizing though. It'd likely make sense to put most of the code I have in the demo above into a function and call that function on resize. Feel free to ask if you need help understanding the calculations that I made. 4 Link to comment Share on other sites More sharing options...
mikel Posted March 31, 2020 Share Posted March 31, 2020 Hey, its fun See the Pen qBdvRbw by mikeK (@mikeK) on CodePen Happy motion ... Mikel 3 Link to comment Share on other sites More sharing options...
dotun12 Posted March 31, 2020 Author Share Posted March 31, 2020 Thanks, ZachSaucier for your respond and mikel I am grateful. 2 Link to comment Share on other sites More sharing options...
alexbudin Posted March 30, 2021 Share Posted March 30, 2021 Hi guys, I have used what @ZachSaucier has done and did this: https://codepen.io/alexbudin/pen/jOyMROa If you scroll down at some point the arrow div remains in the back and is not visible anymore. How can i fix that? How can i have that rectangle at a fixed position on the path? Not sure how to explain it. Any help would be greatly appreciated. Thank you, Alex Link to comment Share on other sites More sharing options...
mikel Posted March 30, 2021 Share Posted March 30, 2021 Hey @alexbudin, Welcome to the GreenSock Forum. You could 'move the path' so that the rect (here: #point) is always in the middle of the viewport. See the Pen qBqEeMj by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
ThomasDue Posted August 27, 2021 Share Posted August 27, 2021 Hi there! Apologies for bringing up an old forum post, I hope it is alright. I have followed the template above, and I’m curious as to how you could scale the contents to fit on smaller resolutions like mobile or tablet devices. I have had success using the Zoom property, but as it doesn’t work in the Firefox browser, it isn’t a desirable solution. Then I have tried to use the scale property, but it seems to impact how the screen position is calculated, skewing my content. I haven’t been able to figure out what the best approach would be to this, is that anything you can help me with? Best regards, Thomas Link to comment Share on other sites More sharing options...
Cassie Posted August 27, 2021 Share Posted August 27, 2021 Hey Thomas - have you looked into using viewBox to make the SVG scale and then adjusting the JS accordingly? Could you add a minimal demo of what you've tried? Link to comment Share on other sites More sharing options...
ThomasDue Posted August 27, 2021 Share Posted August 27, 2021 Hi Cassie Thank you for the quick reply. I haven't tried using the viewBox to scale the document. I have attempted to make a minimal demo with my issue here: See the Pen xxrGmxp by duendue (@duendue) on CodePen I have tried to keep the demo as precise as I could. The scalable-wrapper object is where the issue occurs. When I use zoom, the content behaves as I want it to, by zoming out of the canvas, without impacting the movement. However when I use scale, you will notice that the viewport changes, and the character (In this case, the black square) isn't following the screen at all. I hope my demo is of any help, and if you need any clarification I am happy to assist. Regards, Thomas Link to comment Share on other sites More sharing options...
Cassie Posted August 27, 2021 Share Posted August 27, 2021 See the Pen NWgqogX?editors=0110 by GreenSock (@GreenSock) on CodePen I'd probably start by making the SVG a certain viewport width and using viewBox instead of width and height so that it's scalable. The rest of the code I imagine @mikel will be more help with as I haven't managed to figure out why the demo seems to need the specific pixel width provided. 1 Link to comment Share on other sites More sharing options...
mikel Posted August 28, 2021 Share Posted August 28, 2021 Hey @ThomasDue, Unfortunately, I'm not sure what exactly you want to achieve. Perhaps this (a little tidier) example will help you. Using viewBox for this case is not advisable. Setting of #container does the job here. If you also want to adjust the size of the SVG elements, mediaQueries may be suitable. See the Pen 14f1a789a064937cd32c044cd8fb4b4c?editors=1010 by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
mikel Posted August 29, 2021 Share Posted August 29, 2021 And another alternative: in addition to other details, instead of gsap.ticker, the onUpdate feature is used here for synchronization (point / container). See the Pen 13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
khalil111 Posted July 2, 2022 Share Posted July 2, 2022 On 3/31/2020 at 7:41 PM, mikel said: Hey, its fun Happy motion ... Mikel Can we rotate the svg on scroll back so it wont run backward, thank you Link to comment Share on other sites More sharing options...
GreenSock Posted July 2, 2022 Share Posted July 2, 2022 3 hours ago, khalil111 said: Can we rotate the svg on scroll back so it wont run backward, thank you Hi @khalil111. I don't understand your question. Can you please provide a minimal demo and a GSAP-specific question? Maybe you want to add 180 degrees to the element if the ScrollTrigger's direction is -1? You could do that in an onUpdate on the ScrollTrigger. 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