How can I recreate the on hover pop up effect like Notion's pricing page in Webflow?
To recreate the on-hover pop-up effect like Notion's pricing page in Webflow, you can follow these steps:
Step 1: Build the base structure
- First, lay out the basic structure for your pricing page in Webflow using the desired elements such as cards or div blocks.
- Set up the necessary styles for each element, such as background color, text, and spacing.
Step 2: Create the hidden pop-up content
- Inside each pricing card or element, create a hidden div block where the pop-up content will reside.
- Give this div block a class name, such as "pop-up-content" for easy targeting.
Step 3: Style the hidden pop-up content
- Apply the desired styles to the "pop-up-content" class, such as position, opacity, and width.
- Set the initial state to be hidden by default, either using the Display property or initial opacity of 0.
Step 4: Add an interaction trigger
- Select the pricing card or element and go to the Interactions panel.
- Choose an interaction trigger, such as Mouse Hover.
- Set the interaction to affect the "pop-up-content" class.
Step 5: Create the interaction
- Configure the interaction to change the state of the "pop-up-content" class when the trigger occurs.
- For example, you can set the opacity to 1 or change the position to reveal the hidden content.
- Customize the duration, easing, and other settings to achieve the desired effect.
Step 6: Fine-tune the animation
- Use the Hover Out state to animate the content back to its initial state when the mouse leaves.
- Adjust the timing and transitions to create a smooth and natural animation.
Step 7: Test and optimize
- Preview and test the hover effect to ensure it functions as intended.
- Make adjustments as needed, such as tweaking the animation or adding additional interactions.
By following these steps, you can recreate a similar on-hover pop-up effect like Notion's pricing page in Webflow. Remember to add your own design and content to make it unique to your website.