Animate white vertical bar with scroll-trigger.

[GsapLover]

Hey, I want to animate the white striped bar with the current animation. Additionally, the blue text should be visible when it comes into the view-port, and the purple text should be visible when it goes out of the view-port. Please help.🙂

See the Pen wvRZLpQ?editors=1010 by sumit_appinventiv (@sumit_appinventiv) on CodePen

[Rodrigo]

Hi,

 

The animation for the bar should be super simple and you can tie it up to the ScrollTrigger instance that pins the black section. Just be aware that you have this on your CSS:
 

.bar {
  position: absolute;
  left: -2px;
  top: 0;
  width: 6px;
  height: 120px;
  background: #fff;
  content: "";
  border-radius: 60px;
  transition: all 1s cubic-bezier(0, 0, 0, 1.35);
  -webkit-transition: all 1s cubic-bezier(0, 0, 0, 1.35);
}

Mixing CSS transitions and GSAP is not recommended at all, as Jack explains in this post:

The rest is just some extra conditional logic in the text loops and override some styles for the first text element.

 

Here is a fork of the demo:

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

 

Hopefully this helps.

Happy Tweening!

[GsapLover]

Hi  Rodrigo, It is the exact that I wanted 😍. 

Also, I will look into the recommendation for CSS transition with GSAP.

 

Thanks for the solution and suggestion 🤩.