Share Posted December 15, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted December 15, 2021 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). 👍 Link to comment Share on other sites More sharing options...
Share Posted December 15, 2021 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! Link to comment Share on other sites More sharing options...
Author Share Posted December 15, 2021 @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 ? Link to comment Share on other sites More sharing options...
Share Posted December 15, 2021 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. 1 Link to comment Share on other sites More sharing options...
Share Posted December 15, 2021 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. Link to comment Share on other sites More sharing options...
Author Share Posted December 16, 2021 (edited) 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 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted December 16, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now