search

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.61k stars 16.23k forks source link

Making an SVG circle bounce in properly #806

Closed SandiCat closed 6 years ago

SandiCat commented 6 years ago 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
    <svg width="1366px" height="700px">
        <g transform="translate(0 0)">
            <g class="animated bounceIn">
                <circle style="background-color: red" cx="500px" cy="200px" r="60px" fill="rgba(255, 255, 255, 1)" stroke="rgba(94, 129, 193, 1)" stroke-width="7px"></circle>
            </g>
        </g>
    </svg>
</body>
</html>

peek 2018-04-08 17-54

As you can see, the circle doesn't start bouncing in from its center, but from a top left position. It doesn't just expand radially, but also translates along the diagonal. The farther away from the top left corner the circle is, the more it stretches in animation. The behavior is the same when the class is assigned to the surrounding g or directly to circle. How can I get a nice centered bounce like with HTML elements?

warengonzaga commented 6 years ago

Hello I think you having an issue because you improperly place the css inside the g element. Try this one..

<html>
<head>
    <link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
    <div class="animated bounceIn">
    <svg width="1366px" height="700px">
        <g transform="translate(0 0)">
                <circle style="background-color: red" cx="500px" cy="200px" r="60px" fill="rgba(255, 255, 255, 1)" stroke="rgba(94, 129, 193, 1)" stroke-width="7px"></circle>
        </g>
    </svg>
    </div>
</body>
</html>

and also can you please provide a codepen.io link for this issue so we can easily debug the problem. Thanks!

SandiCat commented 6 years ago

Here's a codepen: https://codepen.io/anon/pen/EEzPBJ

Your solution is inconvenient because it requires me to wrap all my circles in divs and then embed them in SVG again. This is doable, but I've read these classes should work on SVG nodes as well.

eltonmesquita commented 6 years ago

The problem is that there are some nasty bugs with SVG transforms (mainly transform origin related) in several browsers. When 3D transforms are used the problems usually get worse. And yes, animate.css does use 3D transforms. There isn't a quick fix it or hack for this. If you're animating SVGs a lot, you should probably consider a js animation library like gsock that deals with the bugs in several browsers. Unfortunately animate the outer SVG element is one of the few ways to avoid some bugs.

warengonzaga commented 6 years ago

@eltonmesquita yeah, that's what I am talking about... put the animate.css outer above the SVG elements so that the animation will work. So yeah indeed in SVG plus Greensock animation. GSAP can perfectly handle the SVG to use with different browsers. Better to check it out here --> https://greensock.com/svg-tips also if you have some question regarding GSAP you can mention there I am also a contributor to GSAP. tag me as @WarenGonzaga thanks...

SandiCat commented 6 years ago

@eltonmesquita Okay, thank you. Maybe this would be useful to point out somewhere in the README?

As far as I'm concerned, this issue can be closed.

eltonmesquita commented 6 years ago

Good idea, referring to #681 noting the request 😁 Closing it.