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?
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.
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
