Animation in React Project

[Appollos]

I have a div in which I have one block and under it 3 child-blocks, on the right side block with text.

I need to create an animation in which:
when this div in the viewport, I pin it and if user scroll I draw an SVG line from the main block to each child-block, and then we draw a second line (from main to child) we change block with text(simple change content, or toggle class name).

Can somebody help with this, please? (Links to the same animation, articles .etc)

See the Pen ZZxyzg by Appolos (@Appolos) on CodePen

[GreenSock]

Welcome to the forums, @Appollos. And thanks for providing a codepen. We'd be happy to answer any GSAP-specific questions but we just don't have the resources to do free general consulting. I wish I had more time to decipher all your code and build out a solution for you according to the scope you described. Perhaps someone else has time to chime in, though. I hope so. 

 

Did you have any GSAP-specific questions we could help with? 

[Rodrigo]

Hi Apollos, 

 

I agree with Jack, there is a lot you want to do in your sample and basically most of the resources you need are here in the forums and other documentation. For example to draw an SVG path you can use the Draw SVG plugin. Also you could tween the width of a div element with no height but a border-top property as well.

 

As far as using GSAP in React this basically comes to using refs in order to gain access to the DOM nodes and use them in a GSAP instance. Here is a introduction of how to get your React project working with GSAP with live-editable samples:

 

https://greensock.com/react

 

Happy Tweening!!

[PointC]

You mentioned pinning and scrolling so I'm guessing ScrollMagic? If so, here are a few basics from other thread answers that may help.

 

Basic Pinning

See the Pen WRLEwp by PointC (@PointC) on CodePen

 

Pin and play timeline

See the Pen rGZwqK by PointC (@PointC) on CodePen

 

Draw a line on scroll

See the Pen mmPBRm by PointC (@PointC) on CodePen

 

If you're not using ScrollMagic, you could look at the Intersection Observer or possibly even position:sticky. Hopefully this info helps a bit. We're always here for your GSAP questions. Happy tweening.