Recreating a Hero Interaction in Webflow

In this tutorial, we will recreate a captivating hero interaction from the Linktree site using Webflow. The interaction involves phone mock-ups rotating while being tied to cursor movements in 3D space. Additionally, users can cycle through the phone mock-ups by clicking on them. We will break down each step, from setting up the collection list to incorporating the interactions and animations using Webflow's features.

Setting Up the Collection List and Styling the Phone Mock-ups

In Webflow, we will start by creating a collection list that will hold our phone mock-ups. Each phone mock-up will be its own collection item. To ensure that the phone mock-ups overlap and cover their parent, we will switch them to absolute positioning. Since the parent has zero height, we will add top padding of 110%, making it as tall as the items. Initially, we will set the opacity of all the phone mock-ups to zero, and then we will only change the first item to 100% opacity. This will ensure that only one item is visible at a time.

To achieve the 3D rotation effect, we will rotate the children inside the mock-ups. By applying perspective to the elements, we can create a realistic 3D effect. Setting the perspective to 3200 pixels will give the illusion of depth when the phone mock-ups are rotated.

Configuring 3D Space and Cursor Movement

To create a more dynamic effect, we will move the individual children on the z-axis to simulate their distance from the viewer. By adjusting the position of the individual elements, such as pill shapes and social icons, and applying transforms, we can simulate the depth perception within the 3D space.

Additionally, we will tie the rotation of the mock-ups to our cursor movement by applying an interaction to the page. This interaction will be set to move slightly behind the cursor (a lag of 90) and will respond to the cursor's movement on the x-axis. As a result, the mock-ups will rotate and follow the cursor's position, creating an immersive 3D experience.

Implementing Animation with GSAP

By importing the GSAP (GreenSock Animation Platform) library and linking it to Webflow, we can introduce complex animations to our project. To achieve the rotating and cycling effect of the phone mock-ups, we will create a custom function that switches the active item within the collection list at regular intervals. We will use GSAP's timeline to create a smooth and seamless animation that transitions between the previous and next items in the collection list.

Each animation will consist of multiple steps, such as rotating the entire collection list to hide the current item and reveal the next one, as well as staggering the animation of various elements within the next item to create a captivating visual experience.

Adding Interactivity: Mouse Click and Set Interval

In addition to the automatic switching of items, we will enable users to manually cycle through the phone mock-ups by clicking on the collection wrapper. This feature will clear the set interval and instantly switch to the next item, allowing users to interact with the hero interaction. By incorporating a set interval function, the animation will repetitively run every few seconds, creating a seamless and engaging experience.

Furthermore, we will ensure that clicking on an item resets the timer, preventing rapid changes and maintaining a smooth and controlled interaction. By implementing a clear interval function alongside a custom function to reinstate the interval after a click event, we can seamlessly switch between automatic and manual interaction with the phone mock-ups.

Conclusion

In this tutorial, we have explored the process of recreating a captivating hero interaction from the Linktree site using Webflow. By leveraging Webflow's features, including collection lists, interactions, and animations, we have successfully replicated the rotating phone mock-ups with 3D perspective and cursor tied movements. Additionally, by integrating GSAP for advanced animation, we have enhanced the user experience with smooth transitions and interactive elements. This tutorial serves as a testament to Webflow's versatility and capabilities in creating engaging and interactive web experiences.