Wicked Components

A lightweight JavaScript component library that provides essential UI modules for dynamic web interactions. Built specifically for Webflow projects, it empowers developers to easily add advanced interactions and elevate their web projects with customizable components.

🚀 Features

• Tooltip Component: Advanced tooltip functionality with extensive customization options
• Scroll to Top Component: Smooth scroll-to-top functionality with customizable animations
• Social Share Component: Easy social media sharing with multiple platform support
• Counter Component: Animated counters with customizable triggers and animations
• Previous Page Component: Simple navigation back to previous page
• Magnifying Dock Component: Interactive dock with mouse-responsive scaling effects
• Webflow Integration: Designed specifically for Webflow projects with easy attribute-based configuration
• Lightweight: Minimal footprint with automatic dependency loading
• Customizable: Extensive configuration options through HTML attributes
• Modern: Built with modern JavaScript (ES6 modules)
• Minified Versions: Production-ready minified files available for all components

📚 Dependencies

The library automatically loads these dependencies when needed:

• Tippy.js v6: Advanced tooltip library
• Popper.js v2: Positioning engine

🎯 Quick Start

Tooltip Component

Add tooltips to any element using the wa-tooltip="component" attribute:

<button wa-tooltip="component" wa-tooltip-body="This is a tooltip!">
  Hover me
</button>

Scroll to Top Component

Add scroll-to-top functionality to any element using the wa-scroll-to-top="component" attribute:

<button wa-scroll-to-top="component">
  Scroll to Top
</button>

Basic Configuration

<div 
  wa-tooltip="component"
  wa-tooltip-body="Your tooltip content here"
  wa-tooltip-placement="top"
  wa-tooltip-theme="light"
>
  Hover over this element
</div>

Previous Page Component

Add previous page navigation to any element using the wa-previous-page="component" attribute:

<button wa-previous-page="component">
  Go Back
</button>

Magnifying Dock Component

Add interactive dock scaling effects to any element using the wa-magnifying-dock="component" attribute:

<div wa-magnifying-dock="component">
  <div wa-magnifying-dock="list">
    <div wa-magnifying-dock="item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div wa-magnifying-dock="item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div wa-magnifying-dock="item">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</div>

⚙️ Configuration Options

Tooltip Attributes

| Attribute | Description | Default | Values | |-----------|-------------|---------|--------| | wa-tooltip-body | Tooltip content text | Required | Any string | | wa-tooltip-placement | Tooltip position | top | top, bottom, left, right | | wa-tooltip-theme | Visual theme | light | light, light-border | | wa-tooltip-max-width | Maximum width in pixels | Auto | Number | | wa-tooltip-z-index | CSS z-index value | Auto | Number | | wa-tooltip-arrow | Show arrow pointer | false | true, false | | wa-tooltip-effect | Animation effect | None | shift-away, shift-toward, scale, perspective | | wa-tooltip-duration | Animation duration (ms) | 300 | Number | | wa-tooltip-delay-before | Delay before showing (ms) | 0 | Number | | wa-tooltip-delay-after | Delay before hiding (ms) | 0 | Number | | wa-tooltip-trigger | Trigger event | mouseenter focus | click, mouseenter, focus, etc. | | wa-tooltip-appear-on-touch | Show on touch devices | false | true, false | | wa-tooltip-offset-x | Horizontal offset | 0 | Number | | wa-tooltip-offset-y | Vertical offset | 0 | Number | | wa-tooltip-interactive | Allow interaction with tooltip | false | true, false | | wa-tooltip-allow-html | Allow HTML in content | false | true, false |

Scroll to Top Attributes

| Attribute | Description | Default | Values | |-----------|-------------|---------|--------| | wa-scroll-to-top-speed | Animation duration in milliseconds | 2000 | Any number | | wa-scroll-to-top-easing | Animation easing function | ease | linear, ease, ease-in, ease-out, ease-in-out, bounce | | wa-scroll-to-top-delay | Delay before scroll starts (ms) | 0 | Any number | | wa-scroll-to-top-offset | Offset from top in pixels | 0 | Any number |

Magnifying Dock Attributes

| Attribute | Description | Default | Values | |-----------|-------------|---------|--------| | wa-magnifying-dock-strength | Strength of the scaling effect | 100 | Any number | | wa-magnifying-dock-max-scale | Maximum scale factor | 2 | Any number ≥ 1 | | wa-magnifying-dock-direction | Direction of scaling | horizontal | horizontal, vertical | | wa-magnifying-reactive | Enable reactive scaling mode | true | true, false |

🎭 Advanced Examples

Advanced Tooltip Example

<button 
  wa-tooltip="component"
  wa-tooltip-body="<strong>Bold text</strong> and <em>italic text</em>"
  wa-tooltip-placement="bottom"
  wa-tooltip-theme="light-border"
  wa-tooltip-arrow="true"
  wa-tooltip-effect="scale"
  wa-tooltip-duration="500"
  wa-tooltip-delay-before="200"
  wa-tooltip-offset-y="10"
  wa-tooltip-interactive="true"
  wa-tooltip-allow-html="true"
>
  Advanced Tooltip
</button>

Advanced Scroll to Top Example

<button 
  wa-scroll-to-top="component"
  wa-scroll-to-top-speed="1500"
  wa-scroll-to-top-easing="bounce"
  wa-scroll-to-top-delay="200"
  wa-scroll-to-top-offset="100"
>
  Scroll to Top
</button>

Advanced Magnifying Dock Example

<div 
  wa-magnifying-dock="component"
  wa-magnifying-dock-strength="150"
  wa-magnifying-dock-max-scale="3"
  wa-magnifying-dock-direction="vertical"
  wa-magnifying-reactive="false"
>
  <div wa-magnifying-dock="list">
    <div wa-magnifying-dock="item">
      <img src="gallery1.jpg" alt="Gallery Image 1">
    </div>
    <div wa-magnifying-dock="item">
      <img src="gallery2.jpg" alt="Gallery Image 2">
    </div>
    <div wa-magnifying-dock="item">
      <img src="gallery3.jpg" alt="Gallery Image 3">
    </div>
  </div>
</div>

Available Animation Effects

• shift-away: Tooltip shifts away from trigger
• shift-toward: Tooltip shifts toward trigger
• scale: Tooltip scales in/out
• perspective: 3D perspective animation

🔧 Development

Project Structure

wicked.components/
├── index.js          # Main entry point
├── index.min.js      # Minified main entry point
├── tooltip.js        # Tooltip component
├── tooltip.min.js    # Minified tooltip component
├── scroll-to-top.js  # Scroll to Top component
├── scroll-to-top.min.js # Minified scroll to top component
├── social-share.js   # Social sharing component
├── social-share.min.js # Minified social sharing component
├── counter.js        # Animated counter component
├── counter.min.js    # Minified counter component
├── previous-page.js  # Previous page navigation component
├── previous-page.min.js # Minified previous page component
├── magnifying-dock.js # Magnifying dock component
├── magnifying-dock.min.js # Minified magnifying dock component
├── package.json      # Package configuration
└── README.md         # This file

Scripts

# Run tests
npm test

📝 Changelog

v1.3.0

• Added Magnifying Dock component with interactive scaling effects
• Added support for horizontal and vertical scaling directions
• Added reactive and ring-based scaling modes
• Added customizable strength and max scale options

v1.2.1

• Added minified files

v1.2.0

• Added Social Share component with multiple platform support
• Added Counter component with animated counting functionality
• Added Previous Page component for navigation

v1.1.0

• Added Scroll to Top component with customizable animations

v1.0.0

• Initial release
• Tooltip component with extensive customization options
• Webflow integration support
• Automatic dependency loading

📄 License

ISC License - see LICENSE file for details.

👥 Author

wicked.apps

Made with ❤️ by wicked.apps