Jump to content


Scroll Trigger/Draw SVG

Recommended Posts

Hi there,


(Note: I didn't realize my links to other CodePens would embed them. The one I'm working on is at the bottom.)


I'm trying to learn how this page was done and will eventually change the line drawing on my CodePen to one of my own. But I'm using this for figuring it out first.


I'm also using this CodePen for the starting point of my script.

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


1. I've got the line drawing, so that's good. but...

2. There's supposed to be a red dot at the end of the black line. And I'm not sure why it's not showing up.

3. Based on the page I'm using to figure this out, that black line should only be a certain length as it goes down the page, and leave the rest with the gray path behind it.

4. That black path also should only be starting out very short at the very top before scrolling begins. Right now it seems to already have written a good portion of the first section.

5. Somehow the paths for the images on the way down should kind of stop the screen from moving down anymore until that vertical stretch of the area has been drawn (example, the numbers at the beginning).

6. I have the background images appearing as they scroll down (thanks to a few lines from the following CodePen), but the timing seems inconsistent

See the Pen 14f1a789a064937cd32c044cd8fb4b4c by mikeK (@mikeK) on CodePen


7. I can't seem to get the animation to actually start before they hit the top of the page. I'm pretty sure this has to do with the scrolltrigger start settings, but I'm not sure how I should be adjusting those.

8. It also looks like the dot in the sample page changes size as it goes through various drawing stages.


Thanks in advance. I'd very much like to understand how this was done so that I can adapt it to something else.

See the Pen zYaoNxE by ThePixelPixie (@ThePixelPixie) on CodePen

Link to comment
Share on other sites

I would start by enabling the markers: true in your ScrollTrigger, this way you can see what is happening when.


I think the issue lies in how this path is drawn in the design program it is created. Your .pathdot element is this really large path and it should be a simple circle element or a path with just a few points, but this path looks nothing like the element shown. I've created a div to represent your red dot and it is following something, but I don't now what


Our @PointC has some great post on how to create paths and animate them with GSAP



Personally I would start with a simple path and some elements and make that your test case to experiment what you will need for your final file. 


See the Pen yLEgqXJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
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.