Lottie responsive origin

I’m having trouble making a responsive Lottie animation scale from the top-right corner instead of scaling from the center.

I’m not sure I’m missing something in Hype or if I need to change something in the Lotties javascript code itself.

Here’s an example or what mean:

lottie_test.zip (14.8 KB)

Haven’t looked at your example as I am not on a computer (currently on the phone). Check the transformation origin in The Hype inspector and set it to zero on each axis.

Your current settings are that it is to be pinned to the top, pinned to the right, and proportionately scale based on the window size. This is happening:

I’m unclear on how this is different from your desired behavior?


Thank you for your replies


Perhaps it’s easier to see what I mean here:

I want the lottie animation to stay on top as it resizes, instead of moving to the center.


Just move the iframe to the top right corner:

Best Regards,

1 Like

your container has to have the proportions of the svg 1550x320 …lottie_test.hype.zip (13.7 KB)

1 Like