DEPT - Scroll-driven Animations

A modern web presentation showcasing CSS scroll-driven animations and smooth scrolling techniques using Lenis. This project demonstrates advanced animation concepts and provides an interactive experience to explore the power of scroll-driven animations in web development.

🎯 Project Overview

This presentation website showcases:

• CSS Scroll-driven Animations using the latest animation-timeline properties
• Smooth scrolling implementation with Lenis
• Modern SCSS architecture with component-based organization
• Educational resources for learning scroll-driven animations

🚀 Features

• ✨ Smooth scrolling with Lenis integration
• 🎬 CSS scroll-driven animations using view() and scroll() timelines
• 🔄 Scroll direction detection with visual feedback
• 📚 Educational resources and documentation links
• 🎯 Performance-optimized animations

🛠️ Technology Stack

• Build Tool: Vite 7.1.2
• Styling: SCSS/Sass 1.90.0
• Smooth Scrolling: Lenis 1.3.8
• JavaScript: ES6+ Modules
• CSS: Modern CSS with scroll-driven animations

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (version 16 or higher)
• npm or yarn package manager
• A modern web browser with scroll-driven animations support

🔧 Installation

1. Clone the repository

   git clone <repository-url>
   cd scroll-driven-animations

2. Install dependencies

   npm install

🚀 Running the Project

Development Mode

Start the development server with hot reload:

npm run dev

The development server will start at http://localhost:5173

Development with Network Access

To access the development server from other devices on your network:

npm run dev:host

Building for Production

Build the project for production deployment:

npm run build

The build output will be generated in the public/ directory with optimized assets.

Preview Production Build

Preview the production build locally:

npm run preview

For network access:

npm run preview:host

📁 Project Structure

SDAPresentation/
├── src/
│   ├── js/
│   │   └── main.js                 # Main JavaScript entry point
│   └── styles/
│       ├── style.scss              # Main SCSS file
│       ├── components/             # Component-specific styles
│       ├── core/                   # Core SCSS variables and mixins
│       ├── helpers/                # Helper functions and utilities
│       └── templates/              # Layout and template styles
├── static/
│   └── img/                        # Static images and assets
├── public/                         # Build output directory
├── index.html                      # Main HTML file
├── vite.config.js                  # Vite configuration
└── package.json                    # Project dependencies and scripts

🎨 Key Features Explained

Scroll-driven Animations

The project demonstrates CSS scroll-driven animations using:

/* View-based timeline */
animation-timeline: view(axis inset);

/* Scroll-based timeline */
animation-timeline: scroll(scroller axis);

Smooth Scrolling

Implemented using Lenis for buttery-smooth scrolling experience:

const lenis = new Lenis({
  autoRaf: false,
  duration: 1,
  orientation: 'vertical',
  smoothWheel: true,
});

Scroll Direction Detection

Real-time scroll direction detection with visual feedback:

// Detects scroll direction and updates UI accordingly
function handleScrollDirection(currentScrollY) {
  // Implementation in src/js/main.js
}

🌐 Browser Support

This project uses modern CSS features and requires browsers that support:

• CSS Scroll-driven Animations
• ES6+ JavaScript modules
• CSS Grid and Flexbox
• Custom CSS Properties

Recommended browsers:

• Chrome/Edge 115+

📚 Educational Resources

The presentation includes links to various educational resources:

• YouTube Playlist on Scroll-driven Animations
• Chrome DevTools Extension
• Chrome Developer Documentation
• MDN Web Docs - ScrollTimeline
• CSS-Tricks Articles

🔧 Configuration

Vite Configuration

The project uses a custom Vite configuration (vite.config.js) that:

• Generates relative paths for deployment flexibility
• Handles SCSS preprocessing
• Optimizes assets for production
• Configures static asset handling

SCSS Architecture

The SCSS is organized using a modular approach:

• Core: Variables, mixins, and base configurations
• Components: Reusable component styles
• Templates: Layout and page-specific styles
• Helpers: Utility functions and mixins

🚀 Deployment

The build process generates static files in the public/ directory that can be deployed to any static hosting service:

1. Run npm run build
2. Deploy the contents of the public/ directory
3. Ensure your server serves the files with appropriate MIME types

Subdirectory Deployment

The project is configured to work in subdirectories using relative paths. An .htaccess file is included for Apache servers.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Damián Muti

• Email: damian.terragni@deptagency.com
• Company: DEPT Agency

🙏 Acknowledgments

• Lenis for smooth scrolling
• Vite for the excellent build tool
• The web development community for advancing scroll-driven animations

---

Built with ❤️ for the web development community