Animation
Phone Scroll Animation in Framer
Created by
About The Resource
This demo is using the good old technique of sticky positioning and scroll transforms.
I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.
The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.
About The Resource
This demo is using the good old technique of sticky positioning and scroll transforms.
I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.
The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.
About The Resource
This demo is using the good old technique of sticky positioning and scroll transforms.
I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.
The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.
Phone scroll animation scroll transform setup.
Phone scroll animation scroll transform setup.
Phone scroll animation scroll transform setup.
In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.
In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.
In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.
