Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SteinarvDesign

Responsive Logo w. Gsap, SplitText, particles & Svg

Go to solution Solved by PointC,

Recommended Posts

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'.RESPONSIVE-LOGO-DIAGRAM-01.thumb.png.9fcd468d486b0f59434a5615d1bc1263.png

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

Link to comment
Share on other sites

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

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

@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

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. 

  • Like 1
Link to comment
Share on other sites

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

  • Solution

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.

:)

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×