Image roation issue - image scales weirdly at end of rotation animation

[OvertonGraphics (Josh Overton)]

http://pobbleplayground.webflow.io/balloons

hi all, does anyone know why after simply rotating the schools word image with an interaction does it pop the scale up a little at end of the roatation?

Edit: Seems to happen on chrome not safari

Thanks

[vincent (Vincent Bidaux)]

Probably anti-aliasing. Doesn’t happen during transforms.

Usually those problems occur in Safari no chrome

i would try custom code like this which will force antialisasing at all times on the element

` -webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);``

Let’s see after that

[OvertonGraphics (Josh Overton)]

thanks vincent, interestingly enough after doing all the other animations the issue resolved itself

refresh the page to see the balloons.

Cheers!

[vincent (Vincent Bidaux)]

Nice anim, issue solved indeed.

I wanted to try such an anim with Tumult Hype, using their kinetic engine

[OvertonGraphics (Josh Overton)]

Oh cool, hadn’t heard of this software. will ahve to giv eit a try. and super easy to embed into webflow i’m guessing

[vincent (Vincent Bidaux)]

Not super easy, you still have to host the results somewhere. But it’s just normal to use a genuine timeline for animations that are a little complex.

Here’s an example of keyframed anim I did with Hype, integrated into a Webflow site: http://smartroute.webflow.io/

Here’s how it’s embeded:

Here’s how it looks on Hype:

Tumult Hype

[OvertonGraphics (Josh Overton)]

That’s great, I can see how that wouldn’t be doable in webflow. Nice!!