Drawing a line down path with ScrollTrigger BUT continously tiling the path??

[pootpoot]

Hello,

 

So after seeing some scroll triggers examples on the forum, I copy pasted an amalgamation, of examples - particularly a very cool example provided by @mikel.

 

I got it working with a new path, however what I wanted to do was repeat the path over and over again until it reached the end of the container, while connecting the paths altogether?

 

Note: the vertical movement logic, is also a bit wonky right now.

 

Any advice would be appreciated.

 

Thanks in advance!

 

Dan K.

See the Pen abJVmRG by danjhkim (@danjhkim) on CodePen

[Cassie]

That's going to be a tough one from where you're at right now. It's not something GSAP can do for you - it's all in the SVG setup

It's not impossible,  but you'd be getting into generating your own SVG paths with JS based on the height of the container. 

If it's an exercise in SVG path syntax you're after I'll happily talk you through and link you to the things you'd need to know for this.

If you just want the visual effect I'd probably suggest drawing out the path the length you want in a graphics editor from the start.

[pootpoot]

hey, thanks for the reply!

 

Hmm, I guess I'll try to just extend the SVG path. I think I can manage it however..

 

I'm not sure how that would work out, when scaling to different screen sizes.?

 

If you could link me some things, I'd appreciate it.

 

Thanks again

[Cassie]

Well. SVG is scalable by default (Scalable Vector Graphic) so you're starting off at a good point.

 

If you want to control how the SVG 'fits' into the space you define you'll want to look at preserveAspectRatio. The 'meet' and 'slice' values allow you scaling control like background-size

 

background-size:cover => preserveAspectRatio="xMidYMid Slice"

background-size:contain => preserveAspectRatio="xMidYMid Meet"

And the X and Y Min/Mid/Max values are like position

If what you want's too complex for simple resizing you could also draw two different paths (or more) and swop out the paths at different screen sizes using media queries.
 ScrollTrigger allows you to define different animations for different screensizes too, so that would be tidy enough - https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

 -------------------

If you want to go the hard route and dynamically generate paths - you'll want to be looking at SVG path commands 👀

Good luck. It's a rabbit hole!

https://css-tricks.com/svg-path-syntax-illustrated-guide/