Overview

This project is part of an advanced assignment focused on mimicking specific scroll behavior and responsiveness as demonstrated in provided videos. The goal is to replicate the UI and effects exactly as shown in the videos, ensuring the same experience on both desktop and mobile devices.

Features

• Smooth Scroll Animations: Utilizing GSAP and ScrollTrigger to create advanced scroll animations.
• Responsive Design: Ensuring the UI adjusts seamlessly across different screen sizes, especially on mobile devices.
• SVG Path Slider Animations: Implementing animations along SVG paths using TweenMax.
• Carousel Sliders: Integrating OWL Carousel for smooth slider transitions.

Technologies Used

• HTML
• CSS
• JavaScript
• jQuery
• GSAP (GreenSock Animation Platform)
• ScrollTrigger
• ScrollMagic

Resources

• GSAP: Official Site
• ScrollTrigger from GSAP: Official Site
• ScrollMagic: Official Site | Examples
• SVG Path Slider: Path Slider JS | GitHub Repo
• TweenMax for SVG Slider Animation: CDNJS
• OWL Carousel: Official Site

Instructions for Review

To review the project:

1. Navigate to the provided demo link.
2. Interact with the page by scrolling to observe the animations and transitions.
3. Resize your browser window or view on a mobile device to test responsiveness.

Setup Instructions

To set up the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/rashidpbi/ScrollAnimation.git

2. Navigate to the project directory:

   cd ScrollAnimation

3. Open index.html in your preferred browser:

   open index.html