This is
![](https://framerusercontent.com/images/n1TB8h53RV5bbndRTndhevXRUy8.png)
Spline in
![](https://framerusercontent.com/images/EtkQDVq2zKn1c7Jbv7a3N1Zms.png)
Framer
and it is scroll transformed.
But, how?
Setup states & events
To create states for your 3D element in Splice, begin by defining the base state, in our case when the phone is positioned sideways, as well as the final state when the phone is rotated.
Next, add a scroll event of type "scroll". Finally, set the animation Actions to transition from the current state to the final state when the scroll event is triggered.
Export settings
Export in "viewer" mode with mouse events set to "global", configure the play settings so that all additional settings are disabled (i.e. set to "no"). This ensures that only scroll events will trigger the animation, and all other events will be ignored.
Framer import
Use code embed to add Splice to Framer. Select the "Absolute" type. Then, place the Splice code embed in a sticky scroll frame. Ensure that the overflow is set to visible for all layers to allow for proper scrolling and viewing of the animation.