Building a Googly Eye Plugin: Physics in Framer

In this tutorial, we'll build an interactive googly eye plugin for Framer that tracks mouse movement and creates delightful, physics-based animations.

What We'll Build

The Googly Eye plugin adds mouse-following eyes to any element in your Framer project. The eyes will track cursor movement with realistic physics, creating an engaging and playful interaction.

Prerequisites

• Basic understanding of Framer
• Familiarity with JavaScript/TypeScript
• Understanding of CSS transforms

Step 1: Setting Up the Component

First, we'll create the basic structure of our googly eye component. We need two main elements: the eye container and the pupil that will move inside it.

Step 2: Tracking Mouse Movement

We'll use event listeners to track the mouse position and calculate the angle between the eye center and the cursor.

Step 3: Adding Physics

To make the movement feel natural, we'll add easing and constraints to prevent the pupil from moving outside the eye boundary.

Step 4: Mobile Support

We'll add touch event support so the eyes work on mobile devices as well.

Conclusion

You now have a fully functional googly eye plugin! Experiment with different sizes, colors, and behaviors to make it your own.