New component ideas for Motion-Primitives

[ibelick]

Yoo everyone!

A massive thanks for your support of motion-primitives! 🫶
With the recent growth in interest, it’s the perfect opportunity to expand the library. I'm inviting you all to propose new component ideas or improvements.

Reminder: The goal of Motion-Primitives is to develop a robust set of core motion components using Framer Motion. Each component should be customizable and come with detailed documentation and examples. Keep in mind, the project is in beta, so code and styles may evolve as we refine the collection.

How to Participate:

Describe the component: What does it do? Keep it brief and clear.
Use case: How would this component be used?
Value: Why is this component beneficial?

React to ideas you support and discuss why you like them. The most popular ideas will be considered for development.

[ibelick]

To kick off the conversation, here are some ideas on my todo list:

Direction Aware Panel

Description: Animates content based on the direction the user navigates through a sequence.
Use Case: Utilized in slideshows, or multi-step forms to enhance user interaction.
Value: Improves the UX by providing a visual cue of navigation flow.

Scrolljacking

Description: Takes control of the browser's default scroll behavior to trigger animations or jump between sections smoothly.
Use Case: Ideal for interactive storytelling or presentation-style web pages where precise control over scroll behavior enhances the user experience.
Value: Provides an engaging way to present content, keeping users focused on the flow of the site.

Draggable List

Description: Allows users to reorder items in a list through drag-and-drop interactions.
Use Case: Ideal for task management apps, playlist organizers, or any settings where list order customization is necessary.
Value: Offers an interactive way for users to manage their content, enhancing usability and personalization.

Swipe with Actions

Description: Provides actionable responses (like delete, archive, etc.) when users swipe on a list item.
Use Case: Useful in email apps, todo lists, or any application where quick actions are beneficial.
Value: Increases efficiency in user workflows by enabling quick, intuitive actions right from the list interface.

[ZipBrandon]

Great ideas. I would love to see how Direction Aware Panel is seen in your head.

Regarding Draggable List. How do you see this differ from https://www.framer.com/motion/reorder/ ?

[AndreaBarghigiani]

Scrolljacking would be great 😅

[AviOfLagos]

Infinite Horizontal Scroll Carousel

Description: Creates a continuous, looped scrolling effect for displaying content horizontally, such as brand logos, images, or banners.

Use Case: Ideal for marketing websites to showcase brands a company has worked with, auto-scrolling image galleries, or background banners.

Value: Enhances visual appeal and user engagement by offering a smooth, seamless way to present multiple items without interruption. This component is particularly useful for maintaining a dynamic and polished look in sections where content needs to be highlighted continuously.

Feel free to reach out if design support is needed—I’m a designer and can provide the necessary visuals.

[ibelick]

I shipped the Infinite Slider component that covers this!

[AviOfLagos]

Scroll-Triggered Fade In/Out

Description:
Elements smoothly fade in or out as they enter or exit the viewport during scrolling.

Use Case:
Ideal for content-heavy pages like blogs, portfolios, or landing pages where you want to draw attention to elements as they come into view.

Value:
Provides a subtle yet effective way to guide users’ attention to important content. It enhances readability and can create a more engaging browsing experience.

[ibelick]

Thanks for the idea! We already have an In-View component that might fit your needs. Does this work for what you're looking for?

[aryan-panja]

I have made a component for multi cards. would love to push it here.

[ibelick]

Closed this discussion, use issue to propose a new component