Загрузка...

How to create a scroll focus effect in framer!

Here I share with you a framer resource on how to design a scroll focus effect in framer. I got this inspiration from a Top-designer's website, that I would not tell you about, haha!

Any way you can find the video above and the remix file below to try and practice it.

Happy diving!

Timestamps
0:18 - Introduction to the scroll focus effect
1:11 - Setting up the workspace and initial frame
2:34 - Adding the main image frame
3:56 - Styling the image frame with padding and shadows
5:30 - Adding a border to the frame
6:38 - Adjusting the image frame size and positioning
8:38 - Creating the scroll effect and blur transformation
10:57 - Implementing scroll variants for blur effect
13:50 - Hiding dummy sections and final preview
15:54 - Conclusion
Buy me coffee: https://coff.ee/framerdive
Resources:
Remix link: https://framer.com/projects/new?duplicate=60T4CoarxZn26m6c9wCd&via=joseph25

Ps: Not designed to be responsive.

Видео How to create a scroll focus effect in framer! канала Framerdive
Яндекс.Метрика
Все заметки Новая заметка Страницу в заметки
Страницу в закладки Мои закладки
На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.
О CookiesНапомнить позжеПринять