Creative Effects

We're thrilled to extend our array of scroll and appear effects with the addition of four dynamic ones - Hover, Drag, Loop, and Press. Each of these allows for unique interactions and experiences and are customizable as per your needs.

Hover Effect

Our journey starts with the Hover effect. This can be accessed from the simplified and redesigned effects panel in Framer. Tweaking properties like scale and rotation is straightforward, and the real-time preview on the canvas inspires quick prototyping. Even 3D rotation or offset can be manipulated to your liking. Upon previewing, it becomes apparent how simple it is to add interactive hover effects to elements on your web page. Although you can still use components with hover variants, this release no longer makes it a necessity if your goal is to incorporate an intuitive hover effect.

Drag Effect

Besides the Hover effect, we've introduced a Drag effect. Here, you get to experiment with properties related exclusively to dragging items. By keeping free form and snapback active, and just adjusting the transition, you create an interaction where the layer can be dragged freely and bounced back to its original place, thanks to the snapback feature.

With this release, a new feature to highlight is the layer panel indicator, which shows layers with an effect applied. It’s small touches like these that make managing complex projects a lot easier.

Loop Effect

Next up is the Loop effect, a personal favorite, which proves extremely powerful yet simple in achieving continuous animations. By fiddling with the offset property, you can set movement in any direction, revealing a seamless loop when previewed. For more organic animations, setting the loop type to "mirror" will cause the loop to bounce back and forth. This, combined with adding a spring transition curve and layer delay, can bring any static web page to life.

Press Effect

Lastly, we have the Press effect. This features an automatic scale reduction on press to partner efficiently with the Hover effect. By manipulating the rotate and transition properties, a layer reacts with rotation on mouse-down and returns to its original state upon mouse-up.

More is Better - Combining the Effects

The fun doesn't stop at just using individual effects. A unique feature of these new additions is their combinability. You can apply all four effects onto a single layer. If we take a simple layer such as the 'pinwheel', you get an upscaling on mouse hover, downscaling on mouse press, infinite rotation, and constrained draggable capability within a predefined area. It gets better with simulated physics that captures the dragging velocity- you can toss the layer around and watch it bounce off the sides using custom transitions.

Finally, Framer’s intelligent enough to assign default cursors for interactive layers. For instance, a draggable layer gets a 'grab' cursor on hover and 'grabbing' cursor while dragging.