Animating a simple line on scroll

[amitr95]

I have a line .section__line which I'm trying to draw in on scroll (and reverse when scrolling back up).

 

However, my current implementation doesn't draw anything. I'm trying to get it to work by animating the lines height on scroll. 

 

Am I missing something obvious? 

 

I've also tried:

 

onEnter: () => {
  const scrollProgress = (window.scrollY - line.getBoundingClientRect().top + window.innerHeight * 0.2) / line.clientHeight;

  const progress = Math.max(0, Math.min(scrollProgress, 1));
  gsap.to(line, { height: `${progress * 100}%`, duration: 0.5 });
},
  onLeaveBack: () => {
    gsap.to(line, { height: 0, duration: 0.5 });
  },
});

 

 

See the Pen poQybgJ by amit_rai95 (@amit_rai95) on CodePen

[mvaneijgen]

Before doing anything with ScrollTrigger I would suggest to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.

 

Most of the time I find it easier to have my elements styled like I want them to be when the animation is finished, than a simple .from() tween will do all the heavy lifting. There are also properties you're better of not animating, like the height and width of the element, so instead of height I've used scaleY. I have no idea what your height calculations were doing, but I've changed your CSS and set the height of the line to 100% instead of 0. (if you want to fix FOUC please read this) and check the transformOrigin to see what that does. Hope it helps and happy tweening! 

 

See the Pen GRwZqwb?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[amitr95]

Hi @mvaneijgen,

 

Thanks for the advice, managed to get the line animation working without ScrollTrigger.

 

With the animation working as expected without ScrollTrigger, I've now tried to re-introduce it and play the animation. However, with ScrollTrigger now in place, the animation because quite glitchy.

 

Why is this? Line 25 in my demo can be uncommented to see the animation working smoothly.

 

[GreenSock]

I notice several problems: 

1. You set the timeline to infinitely repeat/yoyo. That's a very bad idea for a scrubbing scrollTrigger. Imagine trying to scrub over the course of an almost infinite number of iterations. That's why it looks like it's freaking out - every pixel of movement on the scrollbar is moving the playhead a very large distance inside that infinitely-repeating timeline since it must map all of that movement inbetween the start and end scroll positions. Just remove the repeat/yoyo. 
2. I don't understand why you're animating the line from top to bottom TWICE inside that timeline. Don't you just want it to go once? 
3. You're using the very old syntax, like with TimelineMax. It's all been simplified now - you can just use gsap.timeline() instead. 
4. There's no need to keep setting the transformOrigin like that - you can just set it initially and be done. 
5. You can EITHER have scrub OR toggleActions - they're mutually exclusive logically. Just remove the toggleActions. 
6. You're setting transform: translateX(-50%) in CSS, but you should always set transforms via GSAP to ensure that they are unambiguous and fast.
7. Are you sure you want start set to be "top bottom"? Your element is already in the viewport at the top of the page (before scrolling) which means that timeline will be partially-scrubbed. In other words, you'd actually have to scroll BACKWARDS to get the top of the trigger element to touch the bottom of the viewport. Maybe you intended start to just be 0 (top of the page)? 
8. You could probably just simplify that all into a single tween that has a ScrollTrigger attached directly. 

Are you trying to do something like this?: 

See the Pen QWJNeqp?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

By the way, if you want the line to grow at exactly the same pace as the scrolling, it's pretty easy: 

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

[amitr95]

Many thanks @GreenSock & @mvaneijgen, can see where my logic needed tweaking based on the latest demo above and my last codepen.

 

Thanks