📦 Vanilla Tilt for Svelte

A Svelte plugin that implements Vanilla Tilt JS Library features with Svelte/SvelteKit.

✱ Table of Contents 📖

• 🎤 Introduction
• ⚒️ Installation
• 🤚 Usage
• ⚙️ Options
• 🫂 Contributing
• 📜 License

🎤 Introduction

Vanilla Tilt Svelte is a Svelte plugin that allows you to easily incorporate the interactive tilt effect from the Vanilla Tilt JS library into your Svelte applications. With this plugin, you can add a subtle and engaging tilt effect to any element on your page, enhancing the user experience and adding a touch of interactivity.

The plugin is built upon the popular Vanilla Tilt JS library, which provides a simple and lightweight solution for adding tilt effects to elements. By integrating Vanilla Tilt JS with Svelte, Vanilla Tilt Svelte makes it effortless to utilize the library's features within your Svelte or SvelteKit projects.

⚒️ Installation

To install Vanilla Tilt Svelte, you can use your preferred package manager. Here are a few examples:

NPM

npm install vanilla-tilt-svelte

Yarn

yarn add vanilla-tilt-svelte

🤚 Usage

To use Vanilla Tilt Svelte, follow these steps:

1. Import the svelteTilt function from the vanilla-tilt-svelte package in your Svelte component.

<script>
   import svelteTilt from 'vanilla-tilt-svelte';
</script>

2. Apply the svelteTilt function as a Svelte directive to the element you want to apply the tilt effect to, passing the desired options as an object.

<div use:svelteTilt={{
   // Options object
}} />

⚙️ Options

The svelteTilt function accepts an options object that allows you to customize the behavior and appearance of the tilt effect. Here are the available options:

• reverse (boolean): Reverse the tilt direction.
• max (number): Maximum tilt rotation in degrees.
• startX (number): Starting tilt on the X-axis in degrees.
• startY (number): Starting tilt on the Y-axis in degrees.
• perspective (number): Transform perspective; lower values create a more extreme tilt effect.
• scale (number): Scaling factor for the element.
• speed (number): Speed of the enter/exit transition.
• transition (boolean): Enable or disable the transition on enter/exit.
• axis (string|null): Enable tilting on a specific axis ("x" or "y").
• reset (boolean): Reset the tilt effect on exit.
• reset-to-start (boolean): Choose whether the exit reset goes to [0,0] (default) or [startX, startY].
• easing (string): Easing function for the enter/exit transition.
• glare (boolean): Enable or disable the "glare" effect.
• max-glare (number): Maximum opacity of the "glare" effect (1 = 100%, 0.5 = 50%).
• glare-prerender (boolean): Whether to create the glare elements automatically or manually.
• mouse-event-element (string|null): CSS selector or link to the HTML element to listen for mouse events.
• gyroscope (boolean): Enable or disable device orientation detection using the gyroscope.
• gyroscopeMinAngleX (number): The minimum angle on the X-axis that triggers tilt based on gyroscope input.
• gyroscopeMaxAngleX (number): The maximum angle on the X-axis that triggers tilt based on gyroscope input.
• gyroscopeMinAngleY (number): The minimum angle on the Y-axis that triggers tilt based on gyroscope input.
• gyroscopeMaxAngleY (number): The maximum angle on the Y-axis that triggers tilt based on gyroscope input.

✱ Example of full usage ✱

<div use:svelteTilt={{
   reverse: false,
   max: 35,
   startX: 0,
   startY: 0,
   perspective: 1000,
   scale: 1,
   speed: 300,
   transition: true,
   axis: null,
   reset: true,
   "reset-to-start": true,
   easing: "cubic-bezier(.03,.98,.52,.99)",
   glare: false,
   "max-glare": 1,
   "glare-prerender": false,
   "mouse-event-element": null,
   gyroscope: true,
   gyroscopeMinAngleX: -45,
   gyroscopeMaxAngleX: 45,
   gyroscopeMinAngleY: -45,
   gyroscopeMaxAngleY: 45
}} />

🫂 Contributing

Contributions are welcome! If you would like to contribute to Vanilla Tilt Svelte, please follow these guidelines:

1. Fork the repository and clone it locally.
2. Create a new branch for your feature or bug fix.
3. Make your changes and ensure that the project builds successfully.
4. Write tests to cover any new functionality or changes.
5. Commit your changes and push them to your fork.
6. Submit a pull request with a detailed description of your changes.

📜 License

Vanilla Tilt Svelte is released under the ISC License. See the LICENSE file for more information.

ℹ️ Project Information:

• Name: vanilla-tilt-svelte
• Version: 1.0.0
• Description: A Svelte plugin that implements Vanilla Tilt JS Library features with Svelte/SvelteKit.
• Author: Ramy Hadid (@rhpo on GitHub)
• Author's website: https://www.ramey.ml
• Repository: https://github.com/rhpo/vanilla-tilt-svelte
• Bug Reports: https://github.com/rhpo/vanilla-tilt-svelte/issues
• Release date: Thu Jun 22 2023 15:45:55 GMT+0100 (UTC+01:00)

Written by @rhpo with ❤️.