Jump to content
GreenSock

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

Draw SVG stroke on scroll with pin

Recommended Posts

Hey, Would you please assist me in drawing a SVG stroke on scroll with a section/div pin. Please just see the attachment.

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<section class="homesection8">
<svg viewBox="0 0 1697 774" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1004.59 207.25C1101.81 110.14 1182.89 57.69 1310.55 57.69C1492.58 57.69 1640.14 205.25 1640.14 387.28C1640.14 569.31 1492.58 716.87 1310.55 716.87C1128.52 716.87 1024.36 570.77 851.9 387.28C689.74 214.74 568.3 57.68 386.28 57.68C204.25 57.68 56.69 205.24 56.69 387.27C56.69 569.3 204.25 716.86 386.28 716.86C518.41 716.86 591.87 660.01 692.04 554.25" stroke="orange" stroke-width="113.37" stroke-miterlimit="10" stroke-linecap="round"/>
</svg>
</section>
</body>
</html>

svg.html

Link to comment
Share on other sites

Welcome to the forums, @Amegh

 

You could use DrawSVGPlugin to draw that, sure, and hook it up to a ScrollTrigger that's pinned. 

 

We don't generally build out solutions for people in these forums, but this was pretty easy: 

See the Pen LYQmQBG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Please keep in mind that DrawSVGPlugin is a members-only benefit of Club GreenSock, so you'll need to join to get full access to that outside of CodePen. 

 

Enjoy!

  • Like 4
Link to comment
Share on other sites

Hi there Amegh, You can get access to DrawSVG by joining 'Simply Green' 

 

I'm afraid we don't offer access to individual plugins - But we’re pretty confident you’ll find that the membership pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. 

 

Please let us know if we can help with anything else!

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