path What is the animation technique used for the moving path?

[rafal55]

What is the name of the animation used for the moving path effect in the hero section at hopenvios.com?

 

Additionally, if there are any existing examples that demonstrate how to implement this in a React application, I would greatly appreciate it if you could share them.

 

 

 

 

[mvaneijgen]

Hi @rafal55 welcome to the forum!

 

The site you link does not exist, I think you mean https://hopenvios.com.ar/ ? 

 

This effect can be done with our premium plugin DrawSVG https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ which you can just give a SVG path and it will draw it for you.

 

I would not worry to much about integrating it in React. Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

If you need further help please create a minimal demo showing what you've tried and we'll be happy to point you in the right direction, Here is a starter template which loads all the plugins. Hope it helps and happy tweening! 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.