Streaming live at 10am (PST)

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


#1

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


#2

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

Usually those problems occur in Safari no chrome :slight_smile:

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 :slight_smile:


#3

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

refresh the page to see the balloons.

Cheers!


#4

Nice anim, issue solved indeed.

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


#5

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 :slight_smile:


#6

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:


#7

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


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.