Jump to content
Search Community

generate a circle on scroll

Skatedan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Ih Guys, I'm Daniel and I'm new here,

I've a svg path (transformed in x,y points) for a line of points.

i would like to know if there is a way to draw a circle during the scroll of page.

 

in other words i would like to  paint a small circle over the scroll. :)

Anyone can you help me?

Thanks.

Good Evening.

Daniel.

Link to comment
Share on other sites

Hey Dan and welcome to the GreenSock forums.

 

You should break this down into two steps:

  1. "Painting" the circle.
  2. Making the circle "paint" on scroll.

For 1. you should look into GSAP's DrawSVG

2. Depends on exactly how you want it to reveal on scroll. Maybe this thread can help:


Overall, if you provide a demo of your work after looking at these resources we will be able to better help you.

 

Happy tweening :) 

  • Like 2
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Hey Dan and welcome to the GreenSock forums.

 

You should break this down into two steps:

  1. "Painting" the circle.
  2. Making the circle "paint" on scroll.

For 1. you should look into GSAP's DrawSVG

2. Depends on exactly how you want it to reveal on scroll. Maybe this thread can help:


Overall, if you provide a demo of your work after looking at these resources we will be able to better help you.

 

Happy tweening :) 

Hi Zac,

thanks for your kindly answer, i'm following this tutorial , and i would like to draw a point before a plane over the scroll, it's clear?:)

Link to comment
Share on other sites

Just now, Skatedan said:

can you show me a for a little steps how can i do it please?

If you have the demo working like you said you did, you can simply change out the plane for a circle. 

 

Like I said in the past, it would be helpful to have a demo of your issue(s) because right now we have nothing to help with. The below thread can provide more information about how to do so:

 

  • Like 1
Link to comment
Share on other sites

7 minutes ago, ZachSaucier said:

Just replace the src of the img with the URL to the circle image that you want.

i've a this SVG, and i want that plane follow this route

<svg width="1383px" height="3937px" viewBox="0 0 1383 3937" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M-16,-15.3568553 C0,6 48,81 160,102 C272,123 443.5,61 554,61 C664.5,61 745,125.020066 720,276.510033 C703.333333,377.503344 644.534456,458 543.603369,518 L726,870 C747.821022,969.678976 621.276277,1005.93012 346.365766,978.753432 C-66,937.988399 -13.8552959,1444.80324 318.226681,1405.63884 C650.308659,1366.47443 674,1160.34543 710.5,1055.67271 C747,951 925.765037,928.5 955.382518,1070 C971.54469,1147.21613 995.389199,1285.05141 1096.1946,1288.89869 C1197,1292.74598 1182.66823,1197.496 1210.53032,1190 C1271.85962,1173.5 1390.5239,1145.33129 1378,1314.47278 C1365.4761,1483.61428 1092,1370.11664 855,1431 C618,1491.88336 694.651701,1766.26129 915.21843,2068.76129 C1062.26292,2270.42795 1012.11983,2337.50752 764.789182,2270 C766.63272,2272.35703 734.462757,2261.16569 668.279293,2236.42597 C569.004096,2199.3164 379.118678,2235.18532 379.118678,2339 C379.118678,2442.81468 361.219403,2470.69845 279.219403,2509.0284 C197.219403,2547.35834 157.830942,2779.15266 470,2735 C782.169058,2690.84734 633.049252,2547 829.045221,2541 C1025.04119,2535 1097.97335,2629.17616 1125,2662 C1152.02665,2694.82384 1070.47139,2841 955.382518,2894 C840.293647,2947 334,3336.76087 330,3395.93088 C326,3455.10088 293.633426,3545.5 364.5,3639.5 C435.366574,3733.5 607.016682,3645 644.237924,3614 C681.459167,3583 984.827697,3340.58395 1073.93748,3553.5 C1163.04727,3766.41605 620.988018,3868.48051 598.994009,3951.07353" id="path"></path>
</svg>

 

Link to comment
Share on other sites

5 minutes ago, Skatedan said:

i've a this SVG

You could either use a URL encoder and paste it into the src or you can embed the SVG directly, like so:

 

See the Pen ExYMrag?editors=1000 by GreenSock (@GreenSock) on CodePen

 

It seems that you don't have a very good grasp of the basics of web programming. I recommend doing a full course on HTML, CSS, and JavaScript before trying to do a more complex project like this.

 

P.S. That path doesn't look much like a circle :) 

  • Like 2
Link to comment
Share on other sites

Just now, PointC said:

Sono confuso: l'aereo dovrebbe seguire il percorso punteggiato o il percorso delle coordinate di Bezier? Vuoi anche disegnare il tracciato tratteggiato mentre scorri? È giusto?

Sorry :)

however, i would like that plane draw a path svg while scrolling , it's clear?

Link to comment
Share on other sites

This is from another project, but may help. See how the target follows the path on the first tween, but draws the path on the second part.

 

See the Pen WpPRxo by PointC (@PointC) on CodePen

 

Lines 12-14 are the important part. 

tl.add("label")
tl.to("#path2", 3,  {drawSVG:true}, "label");
tl.to("#target", 3, { bezier:{values:motionPath2, type:"cubic"} }, "label");

By using a label, both tweens play at the same time. One animates the target along the path while the other draws the actual path.

 

Hopefully that helps a bit. Happy tweening.

  • Like 2
Link to comment
Share on other sites

This is the MorphSVG plugin — it has a pathDataToBezier() method which helps animate elements along a path.

It is a bonus plugin for Club GreenSock members.

https://greensock.com/club/

 

You can try it and any other Club plugins for free on CodePen. Check this pen for links and info.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

You're trying to get path data from the whole SVG. You'll want to use your path ID of Path-3.

 

var motionPath = MorphSVGPlugin.pathDataToBezier("#Path-3", { align: "#plane" });

 

You'll also need to move that image inside the SVG or you'll get BBox errors. Use something like this:

 

 <image id="plane" xlink:href="https://cdn.pixabay.com/photo/2013/07/12/13/56/paper-plane-147602_960_720.png" x="0" y="0" width="150"/>

 

  • Like 2
Link to comment
Share on other sites

Hi,

I've did it :) no I need of 2 things:

1-line painted must be a line of point (like SVG d)

2-animate it on scroll.


Tthanks for your tips :)

8 hours ago, PointC said:

You're trying to get path data from the whole SVG. You'll want to use your path ID of Path-3.

 


var motionPath = MorphSVGPlugin.pathDataToBezier("#Path-3", { align: "#plane" });

 

You'll also need to move that image inside the SVG or you'll get BBox errors. Use something like this:

 


 <image id="plane" xlink:href="https://cdn.pixabay.com/photo/2013/07/12/13/56/paper-plane-147602_960_720.png" x="0" y="0" width="150"/>

 

 

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.
×
×
  • Create New...