JavaScript Specialist for GSAP & nextjs Carousel
Budget: $30 – $250 CAD
Overview
Develop a reusable, interactive carousel component for Visualizer AI, a platform designed for building and showcasing online profiles. This carousel should respond to both mouse scroll actions on desktop and touch gestures on mobile devices.
### Functional Requirements
1. *Desktop Interaction*
- *Mouse Scroll*: On desktop, the carousel moves left when the mouse is scrolled up and moves right when scrolled down.
- *Viewport Activation*: The mouse scroll effect is active only when the carousel is in the viewport.
- *Smooth Scrolling*: Ensure a smooth scrolling experience without lag.
2. *Mobile Interaction*
- *Touch Gestures*: On mobile devices, users should be able to swipe left or right to move the carousel.
- *Button Controls*: Additionally, provide left and right arrow buttons for carousel control.
- *Responsiveness*: The touch gestures and button controls should be optimized for a variety of mobile devices and screen sizes.
3. *Reusable Component Design*
- *Modularity*: Design the component to be modular and reusable across different parts of the platform.
- *Customizable*: Include options to customize carousel elements like item count, size, and transition speed.
4. *Technical and Design Specifications*
- *Technology Stack*: Use specified technologies (e.g., HTML, CSS, JavaScript, React).
- *GSAP for Animations*: Implement smooth animations using GSAP.
- *Cross-Browser and Cross-Device Compatibility*: Ensure the carousel works seamlessly across different browsers and devices.
- *Accessibility Compliance*: Adhere to WCAG guidelines for accessibility.
5. *Mobile-Specific Requirements*
- *Touch Responsiveness*: The carousel should respond efficiently to touch gestures.
- *Gesture Recognition*: Ensure accurate recognition of swipe gestures for carousel movement.
- *Mobile UI/UX*: Buttons and swipe areas should be sized appropriately for ease of use on mobile devices.
### Non-Functional Requirements
1. *Performance*: Optimize for quick load times and high responsiveness.
2. *Scalability and Flexibility*: Design the component to be easily adaptable for future enhancements.
3. *Documentation and Support*: Provide comprehensive documentation and guidelines for implementation.
4. *Thorough Testing*: Conduct extensive testing for functionality, responsiveness, and compatibility.
### Deliverables
1. Carousel component with desktop and mobile functionality.
2. Complete source code and assets.
3. Detailed documentation for integration and customization.
4. A demonstrative implementation in a sandbox environment.
### Timeline and Budget
- *Timeline*: 1 week
---
This revised document now includes the touch functionality for mobile devices, ensuring the carousel component is fully responsive and user-friendly across all platforms. Remember to test the component thoroughly on various devices to ensure the touch interactions are smooth and reliable.
Develop a reusable, interactive carousel component for Visualizer AI, a platform designed for building and showcasing online profiles. This carousel should respond to both mouse scroll actions on desktop and touch gestures on mobile devices.
### Functional Requirements
1. *Desktop Interaction*
- *Mouse Scroll*: On desktop, the carousel moves left when the mouse is scrolled up and moves right when scrolled down.
- *Viewport Activation*: The mouse scroll effect is active only when the carousel is in the viewport.
- *Smooth Scrolling*: Ensure a smooth scrolling experience without lag.
2. *Mobile Interaction*
- *Touch Gestures*: On mobile devices, users should be able to swipe left or right to move the carousel.
- *Button Controls*: Additionally, provide left and right arrow buttons for carousel control.
- *Responsiveness*: The touch gestures and button controls should be optimized for a variety of mobile devices and screen sizes.
3. *Reusable Component Design*
- *Modularity*: Design the component to be modular and reusable across different parts of the platform.
- *Customizable*: Include options to customize carousel elements like item count, size, and transition speed.
4. *Technical and Design Specifications*
- *Technology Stack*: Use specified technologies (e.g., HTML, CSS, JavaScript, React).
- *GSAP for Animations*: Implement smooth animations using GSAP.
- *Cross-Browser and Cross-Device Compatibility*: Ensure the carousel works seamlessly across different browsers and devices.
- *Accessibility Compliance*: Adhere to WCAG guidelines for accessibility.
5. *Mobile-Specific Requirements*
- *Touch Responsiveness*: The carousel should respond efficiently to touch gestures.
- *Gesture Recognition*: Ensure accurate recognition of swipe gestures for carousel movement.
- *Mobile UI/UX*: Buttons and swipe areas should be sized appropriately for ease of use on mobile devices.
### Non-Functional Requirements
1. *Performance*: Optimize for quick load times and high responsiveness.
2. *Scalability and Flexibility*: Design the component to be easily adaptable for future enhancements.
3. *Documentation and Support*: Provide comprehensive documentation and guidelines for implementation.
4. *Thorough Testing*: Conduct extensive testing for functionality, responsiveness, and compatibility.
### Deliverables
1. Carousel component with desktop and mobile functionality.
2. Complete source code and assets.
3. Detailed documentation for integration and customization.
4. A demonstrative implementation in a sandbox environment.
### Timeline and Budget
- *Timeline*: 1 week
---
This revised document now includes the touch functionality for mobile devices, ensuring the carousel component is fully responsive and user-friendly across all platforms. Remember to test the component thoroughly on various devices to ensure the touch interactions are smooth and reliable.