How to design Scroll Sticky Effect in Framer (Web designer's little secret)

Summary

In this tutorial, Joe demonstrates how to create a dynamic scroll sticky effect using Framer. By rotating and animating cards as the user scrolls, he shows how to design the effect without needing advanced coding skills. The process includes creating card designs, applying scroll animations, adjusting rotations, and setting sticky positioning for smooth, interactive elements. The tutorial is ideal for beginners and those looking to enhance their web design projects with visually engaging, interactive effects.

Takeaways

• 😀 Learn how to create a beautiful scroll-sticky effect with rotating cards in Figma.
• 😀 You don't need to be an expert designer or developer to create advanced effects in Figma—just follow a few simple steps.
• 😀 Start by setting up a scroll section and a container for your cards inside Figma's workspace.
• 😀 Apply the rotation effect to your cards, setting the initial rotation to match the final desired state for smooth animations.
• 😀 Use the 'scroll animation' effect in Figma, and adjust opacity, scale, and rotation for smooth transitions when the card enters the viewport.
• 😀 Set a subtle scale effect (e.g., 1.1) to slightly zoom in or out on the card as it scrolls into view.
• 😀 Adjust the transition timing for smooth animations—try using ease-in or ease-out with a longer duration like 0.8s.
• 😀 Duplicate your cards and tweak their rotation and animation effects to create variety in the scroll-sticky behavior.
• 😀 Make sure the card container's overflow is set to 'visible' for smooth transitions between cards.
• 😀 Set each card's position to 'sticky' to keep it anchored to the page while scrolling, and adjust the top position to control when it sticks.

Q & A

What is the main effect being demonstrated in the video?

The main effect demonstrated is a scroll sticky animation where cards with slight rotations appear as the user scrolls. The cards gradually rotate from one side to the other and scale up slightly for a smooth, dynamic effect.

How can beginners create a similar scroll sticky effect in Figma?

Beginners can create the effect by setting up a scroll section, adding a container for the cards, applying rotation values to each card, and then using Figma's scroll animation feature. The cards are made sticky with specific top offset values and overflow settings are adjusted for visibility.

Why is it important to set the card’s rotation to its final state?

Setting the card's rotation to its final state ensures that the animation starts smoothly. The scroll effect begins with the card in its final position, making the transition and movement look more natural when scrolling.

What is the purpose of the 'Ease Out' transition in the scroll animation?

'Ease Out' is used to make the animation start quickly and slow down as it completes. This creates a more polished and natural movement, as opposed to a constant speed, which would look less dynamic.

How do you duplicate the cards in Figma for this effect?

You can duplicate the cards by selecting the card and using the shortcut 'Ctrl + D' (or 'Cmd + D' on Mac). This allows you to quickly create multiple copies, which can then be adjusted with different rotations and effects.

What is the significance of adjusting the 'Top' value for sticky positioning?

Adjusting the 'Top' value for sticky positioning ensures that the cards stick to a specific position on the screen as you scroll. In this case, the top value is set to 180px, meaning the cards will stick 180px from the top of their container.

What are the potential issues when cards overflow outside their container?

When cards overflow outside their container, it can break the design or cause unwanted scrolling behavior. To avoid this, the container's overflow must be set to 'visible' to ensure the cards remain visible when they exceed the container boundaries.

Why is it recommended to use 'Feed Content' for the scroll section’s height?

Setting the scroll section to 'Feed Content' for its height allows the section to grow dynamically based on the number of cards. This ensures that the section adjusts as more content is added, unlike a fixed height which might cut off content or cause overflow issues.

What role does the shadow effect play in the card design?

The shadow effect adds depth and dimension to the cards, making them visually distinct from the background. It gives a subtle 3D appearance, enhancing the overall aesthetic and making the cards stand out more as they move.

How can users remix the design for their own projects?

Users can remix the design by accessing the remixable file provided in the description. From there, they can modify the card content, adjust the rotation values, experiment with different images, and tailor the effect to fit their own projects.