This document aims to help domestic users learning Framer who face difficulties due to the lack of Korean materials. We've translated content from the official blog into Korean and added practical information. We hope it provides some assistance for those using Framer.

Scroll and hover effects can enrich designs and add interest to a site, and Framer is optimized for creating these effects. In this tutorial, we'll explore how to dynamically change text and background colors using scroll effects and apply a fun 3D hover effect to cards.

Creating Hero/Background Variants

The starting point for scroll effects is preparing Variant for hero content and backgrounds. If the image section has three segments, creating three corresponding variants keeps management tidy.

Assign each image section frame a unique Scroll Section name. Then, by using Scroll Variant in hero and background components, it automatically switches to the variant corresponding to the section name displayed in the current viewport.

Adding Subtle 3D Hover Effects

While scroll transitions alone can add vibrancy, adding 3D hover effects to cards makes interactions seem more convincing. In the property panel, select Hover effects and adjust details such as angle or scale slightly. If the interaction is too pronounced, it can overshadow the information itself, so adjusting it to move subtly allows you to enjoy small interactions while keeping the main content as the focus. Adjust values gradually until you achieve the desired feel.

Conclusion

Using scroll and hover effects in your design can add a new level of interactivity and visual interest. With Framer, you can easily create these effects and experiment with various styles until you achieve your desired result. By exploring the possibilities of scroll and hover effects, you can elevate your design skills to the next level and create captivating designs that grab attention.

See effects and try following the project→

This post is a translation and adaptation of Framer's official blog content ‘Exploring scroll and hover effects in Framer’.