Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dotun12

Onscroll move object on a path with MotionPathPlugin

Recommended Posts

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

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.

  • Like 4
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 11 months later...

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

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

 

  • Like 4
Link to comment
Share on other sites

  • 4 months later...

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

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 2
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.
×