Streaming live at 10am (PST)

Weird issue with size animation

Hello everyone!

I am trying to add a size animation to my hero image that basically when you load the page, will reveal from right to left. Technically, I got what I want with adding the size interaction: making initial state width 0% but height 100% and then after a second have with 100% as well. However, my issue is, that it seems like the image slightly zooms in with this sizing interaction at the very end of the animation. See read only link below for what I mean.

I want this animation to be really smooth, without any zoom or scale effects. Can anyone tell me why this tiny zoom in thing happens?

Here is my public share link:

Hi Jana,

to avoid that “zoom” look, you could try use a move interaction instead of a zoom interaction.

Set an initial state of, say, 100 vw on the x-axis and then add another state and set the x-axis back to 0 vw. Eventually, you can play around with smoothing and duration/ delay.

I’ve tried it on your read only link and it should be close to what you are looking for.

Let me know if you need any further assistance.

hi @ChrisT, thank you for your answer! I just tried the move interaction instead of the size interaction but I am not too happy with it… I found another workaround though. I ended up not animating the image itself but added an overlay div that I then animated with the size interaction from 100vw to 0 vw. That way it worked for me :slight_smile: