cerealbeast

Amazing thanks for the help @mvaneijgen

Thanks, got it working properly now. I amended the html on @Cassie's demo (the viewbox values I used were wrong). For some reason when I forked the codepen to my own profile it doesn't animate though. https://codepen.io/gwjr/pen/OJwVVre

Ahh its working now! Thank you Cassie. One last thing, how do I move the animation to the centre of the screen and make it responsive?

Thanks Cassie, although I can't see anything being animated?

Ok I've managed to get it working (just about). https://codepen.io/gwjr/pen/WNKbagv Are you able to help me get it to the point where it animates on a pinned section like this? https://codepen.io/GreenSock/pen/WNONMXP

This thread states that you can use the pen tool in illustrator, so can I just draw the shape I want with the pen and then get the code needed to animate it with GSAP? Apologies, this is the first time I've looked at clip paths so have absolutely no idea where to start!

I've read the first three articles you linked, unfortunately they don't explain the absolute basics of creating a shape and retrieving the code required.

I have illustrator, I just have no idea what I have to do to get the code I need. Do I trace my logo with the pen tool in Illustrator? Then whats next?

I want to create an animation on my site where a section is pinned and my logo (lightning bolt) is drawn as you scroll. I have been reading/looking at codepens (like the one attached) for a few hours and I'm just a bit confused as to how to get started. How do you create a custom path? It seems that there must be an easier way than having to hand code all of the points as I wouldn't even now where to begin! Is there a way you can upload an image and trace the points over the top or something?

Great thanks! I'll have a play around and see if I can get it working properly

Is it possible to pin each of the three horizontally scrolling sections for a short time so that when it reaches the middle of the screen it remains there briefly as you scroll before scrolling on to the next one?

Thanks for the explanation @akapowl

I'm struggling to get the correct width for a horizontal scroll section. There are 3 sections, each one ha a width of 100vw, then there is a spacer div in between each section with a width of 5vw. So the total width of the 3 sections and 2 spacers is 310vw. But when setting the width of the container div to 310vw or 310%, there is still part of the last section cut off. Does anyone know how to fix?

Trying to implement 'data-speed' using scrollsmoother on my site but whenever I add a data-speed attribute, it moves the div's starting position which breaks the layout of the site. I have found a website that is using 'data-speed' on sections and somehow keeps the divs in the same starting position. I can't see anywhere in the code for that site that is making this work correctly like this, hoping someone can help me out. I have forked a Greensock codepen of a simple scrollsmoother page and changed the height of the top section from 100vh to 50vh to show how it "breaks" the layout: https://codepen.io/gwjr/pen/qBKwdmZ

Solved, needed to update version of GSAP