Onscroll move object on a path with MotionPathPlugin

dotun12 · 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

ZachSaucier · 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.

mikel · March 31, 2020

Hey,

its fun

See the Pen qBdvRbw by mikeK (@mikeK) on CodePen

Happy motion ...

Mikel

dotun12 · March 31, 2020

Thanks, ZachSaucier for your respond and mikel I am grateful.

alexbudin · 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

mikel · 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

ThomasDue · 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

Cassie · 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?

ThomasDue · 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

Cassie · 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.

mikel · 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

mikel · 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

khalil111 · 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

GreenSock · 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.

Onscroll move object on a path with MotionPathPlugin

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members