Zoom in and rotate animations like this?

Design help Animations & Interactions
1

Hello dear webflowers,

I was wondering how to create a zoom in and slight rotate of an image effect while scrolling down the page. I tried with simple things like putting the image in to the div block and than in the interaction make the play scroll timed animation with scale and rotate options but I do not get the proper effect as my image is getting rotated badly and jumping out of the square shape. The effect I want to achieve is just like on this website :https://katiforner.com/works/concrete-stem

If anyone know what is the proper way to do this it would be awesome to share it with me :slight_smile:

Thank youuuuu

2

Hey Sergej_Vavan

I think the best way to achieve this effect is to

  1. create a full width wrapper with relative positioning and overflow set to hidden.
  2. Then, nest an absolute position div block inside that one, and set it to 100% height and width of the parent div. Set the background image to your desired background
  3. Next, create a scroll-through-viewport animation and have the nested div scale from 2 down to 1 and rotate however much you want it to.

Here is a quick build I did to show you what I mean https://preview.webflow.com/preview/rotating-zoom-scroll-effect?utm_medium=preview_link&utm_source=designer&utm_content=rotating-zoom-scroll-effect&preview=a053148c94b777c3dbd6754c34935382&mode=preview

Hopefully that helps!

3

Thanks Paul, but this doesn’t solve my problem as I’m trying to use the image from the CMS collection and not a background image. Your solution works for bg, but not for the CMS image. I’m creating a portfolio pieces template through CMS but it seems that I might give up from that as it is very limited comparing to the regular page build. Thank you for taking time to answer ! :slight_smile: