luukdv / gooey-react Goto Github PK

I have a Gatsby app that the landing page looks like:

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      <Bio />
      <Goo>
        <svg width="192" height="192">
          <g style={{ animation: 'left 4s linear infinite' }}>
            <circle cx="37%" cy="37%" fill="orchid" r="32" style={{ animation: 'right 1s linear infinite' }}/>
            <circle cx="63%" cy="63%" fill="mediumorchid" r="32"/>
          </g>
        </svg>
      </Goo>
    </Layout>
  )
}

Just exactly as the tutorial But it appears that the continuous transformation is about the upper left hand corner of the rectangle rather than the middle. Basically I want to shift the SVG over so that it appears like the turtorial. Right now I only see what appears when the transform takes the display to the 'lower right quadrant'

Thank you

Hello, it seems the bigger svg will causing lagg on safari,

on chrome, it still really smooth,
I use from the example codes, and magnify the size

implement the animation directly on the css instead of animating it on jsx actually reduce the lagg a lil bit,
but still not as smooth as on chrome

i prepared the web to look up
https://dw-test-gatsby.netlify.app/gooey/

any idea why there's a significant performance between browser ?

Hi, I was viewing the docs site on Safari 15.5 (17613.2.7.1.8) on macOS 12.4 (21F79), and all effects were not working as expected.

Here's a screen capture