Jump to content
Search Community

Onscroll move object on a path with MotionPathPlugin

dotun12

By dotun12
in GSAP

Moderator Tag
 Share

Recommended Posts

dotun12

dotun12

Posted
Posted

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

ZachSaucier

Posted
Posted

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
dotun12

dotun12

Posted
  • Author
Posted

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

  • Like 2
  • 11 months later...
alexbudin

alexbudin

Posted
Posted

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

mikel

Posted
Posted

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 5
  • 4 months later...
ThomasDue

ThomasDue

Posted
Posted

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

Cassie

Posted
Posted

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

ThomasDue

Posted
Posted

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

Cassie

Posted
Posted

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
mikel

mikel

Posted
Posted

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
  • 10 months later...
khalil111

khalil111

Posted
Posted
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

GreenSock

Posted
Posted
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. 

  • Like 1

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...