Scroll Trigger/Draw SVG

[ThePixelPixie]

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

[mvaneijgen]

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

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ 

 

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