Responsive Logo w. Gsap, SplitText, particles & Svg

[SteinarvDesign 2 Likes (Newbie)]

How can I write a more effective code with GSAP ?

I have used two SVGs, 'topSVG' and 'bottomSVG'.  The 'topSVG' is a responsive reference for the top of a 'wrapper' div for the 'splitText'.

The 'bottomSVG' has overflow: visible . . . so the particles can flow into the 'topSVG'.

See the Pen QWqdorX by steinarV (@steinarV) on CodePen

[GreenSock 17,857 Likes (Superhero)]

Hi @SteinarvDesign. Nice animation!

 

I read your post a few times and I'm still pretty fuzzy on what exactly you're asking. Unfortunately we don't have the resources to read through 500+ lines of JS/HTML/CSS, critique it, and think of (and then articulate) ways to improve it. Please read the forum guidelines. But perhaps that's not at all what you're asking, so my apologies if I'm totally misunderstanding you. 

 

We're happy to answer any GSAP-specific questions, especially when they're accompanied by a minimal demo (please don't include 300+ lines of code - just use simple elements and the most basic chunk of JS that illustrates the specific problem).  👍

[Cassie 4,831 Likes (Superhero)]

I would just put that all into one SVG... that seems like the obvious answer. But maybe I'm misunderstanding.

That's nothing to do with writing more effective GSAP code though!

[SteinarvDesign 2 Likes (Newbie)]

@Jack  Okay . . . I understand.

May be this is not a GSAP-specific question . . .  but how can I call svg code from an external file or an asset on codepen and use it in my GSAP animation ?

 

@Cassie  One svg can work. If I position the <div id="wrapper" > <h1></h1> </div> , with the text for the 'splitText plugin', dynamically with respect to the group element <g id="letters" > </g> with the handwriting animation :

 

let letters = document.querySelector('#letters');
let lettersRect = letters.getBoundingClientRect();
wrapper.style.top = lettersRect.bottom + 'px';

 

Because the 'splitText' plugin does not work with the svg <text></text> element . . . or does the 'splitText' plugin work inside a svg ?

 

 

[GreenSock 17,857 Likes (Superhero)]

1 hour ago, SteinarvDesign said:

May be this is not a GSAP-specific question . . .  but how can I call svg code from an external file or an asset on codepen and use it in my GSAP animation ?

Sorry, I don't understand your question. SVG isn't "code" that you can "call" - do you mean load SVG markup from an external file and place it into the DOM? If so, yeah, that's possible. Some Google searches should yield good results. 

 

If you want help with splitting <text> in an SVG, please provide a minimal demo and we'd be happy to take a peek. 

[PointC 14,102 Likes (Superhero)]

1 hour ago, SteinarvDesign said:

Because the 'splitText' plugin does not work with the svg <text></text> element . . . or does the 'splitText' plugin work inside a svg ?

You are correct - the SplitText plugin does not work on SVG text nodes. Could you turn your text into paths? If so, everything would scale nicely together in the same SVG. Just a thought.

 

Happy tweening.

[SteinarvDesign 2 Likes (Newbie)]

Split Svg Text  w. GSAP Stagger

I have turned my text into paths. Here is a demo 

See the Pen 0130eb7107636464708bdfba8a44cf8d by steinarV (@steinarV) on CodePen

@Craig, @PointC  Credit to you for the tip !

Edited December 28, 2021 by SteinarvDesign
I made the pen 'private' and have fixed the link

[PointC 14,102 Likes (Superhero)]

Looks good. I'm glad to hear it's working for you now with paths. 

 

Happy tweening and thank you for being a member of Club GreenSock.