Circuit Signal / Branches Movement

[juan-alvarz]

Hi to everyone of this beautifull community.

 

I need some of your help, I want to create a landing page with some cool effects, in this case, I want to create a branch effect/circuit movement, I mean, right now I have this codepen with the init of the animation, I want that the text enter, then, desintegrate into branches, that branches need to move around the page, I imagine this like a circuit signal, something like this:

 

 

but with straighter trajectories instead of curves, I thing that with a SVG Plugin I can do this, but can you provide me some example or help for execute this ideas?

 

Thank you so much.

 

See the Pen RwqjdKQ by juan-alvarz (@juan-alvarz) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

Maybe someone else has some links to share for effects like that. I'm not aware of any and I don't have time to search, sorry. 

[Cassie]

If you're just after examples of DrawSVG maybe look in the docs or in the codepen collection?

docs: https://greensock.com/docs/v3/Plugins/DrawSVGPlugin
collection: https://codepen.io/collection/DYmKKD

The hard bit is going to be drawing the graphic and planning out the animation, the GSAP specific drawSVG bit is nice and easy really!

//draws all elements with the "draw-me" class applied with staggered start times 0.1 seconds apart
gsap.from(".draw-me", {duration:1,stagger: 0.1, drawSVG: 0});