WF-Starter-25

A professional Webflow starter kit with advanced animation capabilities, component architecture, and optimized build system.

Core Features

1. Animation System

• Core Animation Engine (AnimationCore.js)

  • GSAP + ScrollTrigger integration
  • Lifecycle management (init, destroy)
  • Automatic cleanup
  • Configurable triggers and timing
  • Debug support with markers

• Global Animations

  • fade-in: Opacity transitions
  • line: SVG line animations
  • whipe: Clean transitions
  • parallax: Smooth scrolling effects
  • title: Text reveal animations
  • paragraph: Split text animations

2. Component Architecture

• Core Component System (ComponentCore.js)

  • Lifecycle management
  • Event handling
  • Automatic cleanup
  • Modular structure

• UI Components

  • Menu system with animations
  • Smooth scroll integration
  • Custom transitions

3. Page-Specific Animations

• Home page animations
• About page animations
• Work page animations
• Contact page animations
• Automatic page detection and initialization

Project Structure

src/
├── animations/
│   ├── core/
│   │   └── AnimationCore.js     # Base animation class
│   │
│   ├── global/
│   │   ├── effects/
│   │   │   ├── fadein.js
│   │   │   ├── line.js
│   │   │   ├── parallax.js
│   │   │   └── whipe.js
│   │   └── text/
│   │       ├── paragraph.js
│   │       └── title.js
│   │
│   └── pages/                   # Page-specific animations
│       ├── Home/
│       ├── About/
│       ├── Work/
│       └── Contact/
│
├── components/
│   ├── core/
│   │   └── ComponentCore.js     # Base component class
│   │
│   └── ui/
│       └── menu/               # Menu component example
│
├── styles/
│   ├── base.css               # Base styles
│   ├── easings.css           # CSS easing variables
│   ├── lenis.css            # Smooth scroll styles
│   └── index.css            # Style entry point
│
└── utils/                    # Utility functions

Usage

1. Installation

npm install

2. Development

npm run dev

3. Webflow Integration

Add to this to your Webflow project settings (SITE LEVEL):

<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.js"></script>

3.1. Webflow Integration Auto Switch Between Dev and Production

Add to this to your Webflow project settings (SITE LEVEL):

<script>
  (function () {
    const urlParams = new URLSearchParams(window.location.search);
    const isDev = urlParams.get('dev') === 'true';

    // Check if dev server is available
    function loadScript(isDevMode) {
      if (isDevMode) {
        const viteClient = document.createElement('script');
        viteClient.type = 'module';
        viteClient.src = 'http://localhost:3000/@vite/client';
        document.head.insertBefore(viteClient, document.head.firstChild);
      }

      const script = document.createElement('script');
      script.type = isDevMode ? 'module' : 'text/javascript';
      script.src = isDevMode
        ? 'http://localhost:3000/src/main.js'
        : '[your-production-url]/main.js';

      // If dev server fails, fallback to production
      script.onerror = () => {
        sessionStorage.removeItem('localDev');
        loadScript(false);
      };

      document.head.insertBefore(script, document.head.firstChild);
    }

    if (isDev) {
      sessionStorage.setItem('localDev', 'true');
    }

    loadScript(sessionStorage.getItem('localDev') === 'true');
  })();
</script>

4. Using Animations

Basic animations:

<div data-anim="fade-in">Fade in element</div>
<div data-anim="line">Line animation</div>
<div data-anim-whipe="true">Whipe transition</div>
<div data-anim-parallax="true">Parallax element</div>

Text animations:

<h1 data-anim="title">Animated Title</h1>
<p data-anim-para="true">Animated paragraph with split text</p>

5. Page-Specific Animations

Add page identifier:

<body data-page="home">
  <!-- Page content -->
</body>

CSS Features

1. Easing Functions

• Complete set of cubic-bezier easings
• Custom global easing variable
• Consistent animation timing

2. Smooth Scroll

• Lenis integration
• Optimized for animations
• Configurable settings

3. Base Styles

• Animation helper classes
• Text splitting support
• Cross-browser compatibility

Build System

• Vite for development and building
• Single file output (JS + CSS combined)
• Optimized for production
• Source maps for development

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• No IE11 support

License

MIT