ScrollTrigger Line SVG Animation

[test31]

Good afternoon everyone, 

 

I have been trying to draw an SVG Squiggle line using the ScrollTrigger. The idea is that it progresses as you scroll down. However, up until now, the line has already partly progressed when I load the page. It does 'draw' further when I scroll, so that works. I also wanted to try to make the animation responsible, I have tried increasing the size of the SVG as a creative solution, but any suggestions are welcome! 

Here is a DEMO: https://stackblitz.com/edit/gsap-react-basic-f48716-3rj7zk?file=src%2FApp.js since I am working with React.

 

Anyway, I hope you can give me some suggestions based on my code. Thanks in advance!

[Cassie]

Hi!

 

Two small things

 

1) You can clamp your triggers...

 

 

 gsap.to(path, {
      strokeDashoffset: 0,
      ease: 'none',
      scrollTrigger: {
        trigger: '.squiggle-les',
        start: 'clamp(top center)',
        end: 'clamp(bottom center)',
        markers: true,
        scrub: true,
      },
    });

 

2) You can't use SVG elements as a trigger. They have to be in the HTML DOM, so you can use an SVG, but not any internals of the SVG as they're in a different coordinate space.

Hope this helps!

[test31]

Hey Cassie,

 

First of all, thank you for the quick response. Sadly, adding clamps will make the drawn line barely visible when I start scrolling. The line will only become visible when almost at the end of the page. I have updated the demo so you can see the results. Any other suggestions?

Also, do you have any suggestions for making the animation responsive? 

Kind regards!

[Cassie]

That's because your SVG is set up incorrectly.

The viewbox is the red bit. (That's what's visible)

 

I've set overflow to visible so you can see how your path is set up, and the line entends far outside the viewbox. So when you start scrolling, the line is being drawn out of view.

 

See the Pen LYKBybr by GreenSock (@GreenSock) on CodePen

SVG is responsive by default if you just set either the height OR width, but if you set both you override the responsive behaviour.

Depending on how you want the SVG to be viewed you can adjust the width and height, the viewBox and preserveAspectRatio

This article is quite helpful - https://codepen.io/tigt/post/why-and-how-preserveaspectratio

And this demo - https://2019.wattenberger.com/guide/scaling-svg

Hope this helps. I suggest messing about in codepen until you have something you like.

[Cassie]

Here you go, I housed it all inside the viewBox for you, maybe that will give you a jump start?

See the Pen wvLxdPa by GreenSock (@GreenSock) on CodePen

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[test31]

Hey Cassie, 

 

Again, thank you so much for the amount of help you gave me. Thanks to your help I managed to fix the issue with my SVG. However, I still cannot get the animation working properly. I am trying to recreate this animation: 

using GSAP. The SVG gives responsive issues. When being on a screen bigger than 1200px the SVG is too big, showing space under the footer, while on a screen in the middle with (around 700px), the SVG is too little, causing the animation to stop halfway through the page. I have updated the demo once more. 

[Cassie]

There are myriad different ways you could want this to look, so I'm afraid it's quite hard to 'solve' this for you. It's also not down to GSAP, this is purely and SVG and styling thing.

 

As I suggested the best route is going to be just tweaking settings in codepen until you have it sized the way you'd like. There's no need to even have any GSAP animation or React or Nuxt or other components at this stage.

 

Just slow right the way down - learn about viewBoxes, preserveAspectRatio and take some time just experimenting in the browser to get a feel for how SVG's resize. 

 

There's no one solution here. It's a combination of the size of your SVG, how the line is drawn, what ratio the viewBox is, what ratio the screen is, the preserveAspectRatio value and what styles you've defined. When I've done effects like this before I've had multiple SVG's set up and swopped them out for different screen ratios with media queries.

 

Read those links I gave you, tweak the values and experiment until you find something you're happy with. If you're confused about a specific bit of behaviour I'm happy to answer questions, but purely as a gesture, as this isn't actually GSAP related. I just love SVG!

See the Pen xxoJrmx by GreenSock (@GreenSock) on CodePen