Jump to content
Search Community

wiggle path of SVG

knalle test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I wan't to wiggle an existing path - in the style og the blobs here:  , but this one creates blobs instead of using an existing.

 

In this previous post there are some discussion on the topic: 

 

 

I have tried Jack's waveSVG that accepts existing path data. But I notice the start and end points aren't aligning in the wave motion.

I will only wiggle a blob consisting of around 20 points. The various blobs are used as backgrounds for line icons.  

 

Thanks in advance :)

See the Pen vdzjyg by osublake (@osublake) on CodePen

Link to comment
Share on other sites

3 hours ago, GreenSock said:

Looks like setting start:0 and taperStart:0 improves things, right @mikel

That works :) Thanks! The waveSVG  is a solution that works just as fine as Blake's demo. Is there any benefits in speed / CPU load compared to the other (blob) solution? 

  • Like 1
Link to comment
Share on other sites

56 minutes ago, knalle said:

That works :) Thanks! The waveSVG  is a solution that works just as fine as Blake's demo. Is there any benefits in speed / CPU load compared to the other (blob) solution? 

 

It doesn't matter. If you're animating SVG, that's the bottleneck.

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 years later...

Sorry, but this is a Firerfox issue, completely unrelated to GSAP. You can file a bug with them about getScreenCTM being incorrect, or try to find another way to get the mouse coordinates inside in SVG. Or don't have a viewBox. Without the viewBox, the mouse coordinates will be the same as the screen.

Link to comment
Share on other sites

It boils down to the fact that the <svg> element has a width/height of ZERO in the browser. So when it has a viewBox defined, it is trying to fit that into no space at all, thus it's a really funky situation to begin with.

 

Solution: make sure the SVG has a width/height defined. In this case, we'd want to make it match the viewBox:

<svg id="svg" viewBox="0 0 1000 1000" width="1000" height="1000">

But yeah, Firefox is a real pain when it comes to CTM stuff. Several bugs. GSAP already works around a LOT of them. 👍

  • Like 2
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.
×
×
  • Create New...