Jump to content
Appollos

Animation in React Project

Recommended Posts

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

Share this post


Link to post
Share on other sites

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? 

  • Like 2

Share this post


Link to post
Share on other sites

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!!

  • Like 2

Share this post


Link to post
Share on other sites

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.

:)

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.