Skip to content

Commit

Permalink
Added blur animation and an option for adding blur effect to any anim…
Browse files Browse the repository at this point in the history
…ation
  • Loading branch information
artisticLogicMK committed Sep 3, 2024

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
1 parent 48e143d commit 355646a
Showing 21 changed files with 119 additions and 27 deletions.
15 changes: 13 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -170,6 +170,7 @@ zoomIn(el, done).then(() => console.log('Success'))
| [duration](#duration) | `0.4` | `number` | `{duration: 2}`, `data-av-duration="2"`` |
| [delay](#delay) | `0` | `number` | `{delay: 1}`, `data-av-delay="1"` |
| [fade](#fade) | `0.1` | `number` | `{fade: 0.5}`, `data-av-fade="1"`` |
| [blur](#blur) | `0` | `number` | `{blur: 3}`, `data-av-blur="2"`` |
| [ease](#ease) | `"ease"` | `string` | `{ease: "linear"}`, `data-av-ease="backOut"` |
| [offset](#offset) | `"100%"` of element's width | `string` | `{offset: "150px"}`, `data-av-offset="150px"` |
| [onStart](#onstart) | `undefined` | `function` | `{onStart: ()=> action()}` |
@@ -198,6 +199,12 @@ zoomIn(el, done).then(() => console.log('Success'))

> Indicates the starting opacity (for 'enter' animations) and ending opacity (for 'leaving' animations). Accepts `0` to `1`. e.g. `0.5`

#### blur
- **type:** `number`
- _default:_ `0`

> Applies a blur effect to the animation. The higher the value, the more pronounced the blur.

#### ease
- **type:** `string`
- _default:_ `"linear"`
@@ -269,7 +276,7 @@ zoomIn(el, done).then(() => console.log('Success'))
> Easing effect of the 'leave' animation when setting option through dataset attributes e.g data-av-leave-ease="backIn". [Easing values](#ease)

#### Note:
When using both function call and dataset options for an animation, remember that function call options take precedence. This means only the dataset attributes not covered by the function call will be applied. For instance:
When using both function invocation and dataset options for an animation, remember that function invocation options take precedence. This means only the dataset attributes not covered by the function invocation will be applied. For instance:
```html
<script setup>
import { rollIn, rollOut } from 'animate4vue';
@@ -327,6 +334,9 @@ const animateIn = (el, done) => {
- **Vanish animations**
- vanishIn, vanishOut
- **Blur animations**
- blurIn, blurOut
- **Perspective animations**
- perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom
@@ -347,7 +357,8 @@ const animateIn = (el, done) => {
Attention seekers are animations designed to grab users' attention, such as a ringing bell icon or shaking elements. These animations enhance user engagement and provide a compelling experience. Animate4vue offers a variety of dynamic attention-seeking animations to fit any scenario.
### Available Attention-Seeker Animations
`jello`, `bounce`, `pulse`, `flash`, `rubberBand`, `headShake`, `shakeHorizontal`, `shakeVertical`, `swing`, `tada`, `wobble`, `heartBeat`
`puff`, `jello`, `spin`, `bounce`, `pulse`, `flash`, `rubberBand`, `headShake`, `shakeHorizontal`, `shakeVertical`, `swing`, `tada`, `wobble`, `heartBeat`
<small>More coming...</small>
### How To Use:
```html
4 changes: 1 addition & 3 deletions demo/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
# demo

This template should help get you started developing with Vue 3 in Vite.
# Animate4vue Demo Frontend

## Recommended IDE Setup

1 change: 0 additions & 1 deletion demo/src/assets/logo.svg

This file was deleted.

8 changes: 8 additions & 0 deletions demo/src/components/Animations.vue
Original file line number Diff line number Diff line change
@@ -57,6 +57,10 @@ const inAnimations = {
name: 'Puff',
animations: ['puffIn']
},
blur: {
name: 'Blur',
animations: ['blurIn']
},
vanish: {
name: 'Vanish',
animations: ['vanishIn']
@@ -128,6 +132,10 @@ const outAnimations = {
name: 'Puff',
animations: ['puffOut']
},
blur: {
name: 'Blur',
animations: ['blurOut']
},
vanish: {
name: 'Vanish',
animations: ['vanishOut']
5 changes: 5 additions & 0 deletions demo/src/components/AnimationsObject.vue
Original file line number Diff line number Diff line change
@@ -28,6 +28,9 @@ import {
// Puff
puffIn, puffOut,
// Blur
blurIn, blurOut,
// Vanish
vanishIn, vanishOut,
@@ -125,6 +128,8 @@ const animations = {
rollOut: rollOut,
puffIn: puffIn,
puffOut: puffOut,
blurIn: blurIn,
blurOut: blurOut,
vanishIn: vanishIn,
vanishOut: vanishOut,
perspectiveInRight: perspectiveInRight,
6 changes: 1 addition & 5 deletions demo/src/components/Attention.vue
Original file line number Diff line number Diff line change
@@ -37,8 +37,4 @@ const animations = [

<AttentionObject :attention="att" :loop="loop" />
</div>
</template>

<style>
</style>
</template>
4 changes: 4 additions & 0 deletions dist/animations/blur.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { Options } from '../utils/types';
declare const blurIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise<void>;
declare const blurOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise<void>;
export { blurIn, blurOut };
12 changes: 12 additions & 0 deletions dist/animations/blur.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import animate from '../utils/animate';
var blurOptions = {
opacity: 0.5,
filter: "blur(6px)"
};
var blurIn = function (target, done, options) {
return animate('in', target, done, options, blurOptions);
};
var blurOut = function (target, done, options) {
return animate('out', target, done, options, blurOptions);
};
export { blurIn, blurOut };
3 changes: 2 additions & 1 deletion dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ import { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rot
import { skewInRight, skewInLeft, skewOutRight, skewOutLeft } from './animations/skew';
import { rollIn, rollOut } from './animations/roll';
import { puffIn, puffOut } from './animations/puff';
import { blurIn, blurOut } from './animations/blur';
import { vanishIn, vanishOut } from './animations/vanish';
import { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } from './animations/perspective';
import { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } from './animations/openClose';
@@ -26,4 +27,4 @@ import { wobble } from './animations/attentionSeekers/wobble';
import { heartBeat } from './animations/attentionSeekers/heartBeat';
import { puff } from './animations/attentionSeekers/puff';
import { spin } from './animations/attentionSeekers/spin';
export { customAnimation, fadeIn, fadeOut, slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft, wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal, flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom, zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft, rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight, skewInRight, skewInLeft, skewOutRight, skewOutLeft, rollIn, rollOut, puffIn, puffOut, vanishIn, vanishOut, perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom, openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight, textIn, textOut, puff, jello, bounce, spin, pulse, flash, rubberBand, headShake, shakeHorizontal, shakeVertical, swing, tada, wobble, heartBeat };
export { customAnimation, fadeIn, fadeOut, slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft, wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal, flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom, zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft, rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight, skewInRight, skewInLeft, skewOutRight, skewOutLeft, rollIn, rollOut, puffIn, puffOut, blurIn, blurOut, vanishIn, vanishOut, perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom, openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight, textIn, textOut, puff, jello, bounce, spin, pulse, flash, rubberBand, headShake, shakeHorizontal, shakeVertical, swing, tada, wobble, heartBeat };
8 changes: 4 additions & 4 deletions dist/index.esm.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/index.esm.js.map

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion dist/index.js
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ import { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rot
import { skewInRight, skewInLeft, skewOutRight, skewOutLeft } from './animations/skew';
import { rollIn, rollOut } from './animations/roll';
import { puffIn, puffOut } from './animations/puff';
import { blurIn, blurOut } from './animations/blur';
import { vanishIn, vanishOut } from './animations/vanish';
import { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } from './animations/perspective';
import { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } from './animations/openClose';
@@ -42,12 +43,14 @@ flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHori
zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft,
// Rotations
rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight,
// skew
// Skew
skewInRight, skewInLeft, skewOutRight, skewOutLeft,
// Roll
rollIn, rollOut,
// Puff
puffIn, puffOut,
// Blur
blurIn, blurOut,
// Vanish
vanishIn, vanishOut,
// Perspective
14 changes: 11 additions & 3 deletions dist/utils/animate.js
Original file line number Diff line number Diff line change
@@ -10,15 +10,17 @@ var animate = function (direction, target, done, options, properties) {
var defOptions = {
duration: 0.5, // Duration of the animation in seconds
opacity: 0.1, // Initial opacity value
//display: 'none' // Element on hide at initial/end state
delay: 0, // Start the animation immediatey by default
ease: "power1.inOut"
ease: "power1.inOut", // Easing Function
filter: "blur(0px)" // blur effect
};
// Assign element dataset here
var data = target.dataset;
// Check if there are any dataset attributes present on the target element
if (Object.keys(data).length > 0) {
alert(typeof data.avDuration);
// Create an options object with values from the dataset or fallback to default values if not present
// These are properties that must be passed as numbers to gsap
var optionsData = {
duration: parseFloat(data.avDuration) || defOptions.duration,
delay: parseFloat(data.avDelay) || defOptions.delay
@@ -31,7 +33,10 @@ var animate = function (direction, target, done, options, properties) {
console.error('Options object should only include: duration(number), fade(number), delay(number), ease(string), offset(string), onStart(func), and onComplete(func)');
return;
}
// Define value for fade effect
var fadeOption = options.fade || data.avFade;
// Define value for blur effect
var blurOption = "blur(".concat(options.blur || data.avBlur, "px)");
// This func maps a custom easing name to a GSAP easing value.
var setEase = function (selectedEase) {
// Define a mapping from custom easing names to GSAP easing values
@@ -65,7 +70,10 @@ var animate = function (direction, target, done, options, properties) {
}
};
// Merge default options with provided options and additional properties
var allProperties = __assign(__assign(__assign(__assign({}, defOptions), options), { opacity: parseFloat(fadeOption) || defOptions.opacity }), properties);
var allProperties = __assign(__assign(__assign(__assign({}, defOptions), options), { opacity: parseFloat(fadeOption) || defOptions.opacity, filter: blurOption }), properties);
// Remove properties not needed
delete allProperties.fade;
delete allProperties.blur;
// Initialize timeline animation of element
var timeline = gsap.timeline();
// Perform the animation based on the direction ('in(enter)' or 'out(leave')
1 change: 1 addition & 0 deletions dist/utils/runtimeChecks.js
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ export var isValidOptions = function (options) {
(options.duration === undefined || typeof options.duration === 'number') &&
(options.delay === undefined || typeof options.delay === 'number') &&
(options.fade === undefined || typeof options.fade === 'string' || typeof options.fade === 'number') &&
(options.blur === undefined || typeof options.blur === 'string' || typeof options.blur === 'number') &&
(options.ease === undefined || typeof options.ease === 'string') &&
(options.offset === undefined || typeof options.offset === 'string');
};
5 changes: 5 additions & 0 deletions dist/utils/types.d.ts
Original file line number Diff line number Diff line change
@@ -17,6 +17,11 @@ export interface Options {
* Only applicable to animations involving movement in right, left, up & down.
*/
offset?: string;
/**
* Defines the intensity of the blur effect applied to the animation.
* A higher number results in a stronger blur.
*/
blur?: number;
/** Callback function executed when the animation starts. */
onStart?: () => void;
/** Callback function executed when the animation completes. */
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "animate4vue",
"version": "1.0.6",
"version": "1.2.0",
"description": "A library for ready-to-use animations designed for Vue.js applications, featuring over 100 high-performance UI animations crafted with GSAP, offering GPU-accelerated rendering with better performance and efficiency across all devices.",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts",
17 changes: 17 additions & 0 deletions src/animations/blur.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import animate from '../utils/animate'
import { Options } from '../utils/types'

const blurOptions = {
opacity: 0.5,
filter: "blur(6px)"
}

const blurIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise<void> => {
return animate('in', target, done, options, blurOptions )
}

const blurOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise<void> => {
return animate('out', target, done, options, blurOptions)
}

export { blurIn, blurOut }
6 changes: 5 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ import { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rot
import { skewInRight, skewInLeft, skewOutRight, skewOutLeft } from './animations/skew'
import { rollIn, rollOut } from './animations/roll'
import { puffIn, puffOut } from './animations/puff'
import { blurIn, blurOut } from './animations/blur'
import { vanishIn, vanishOut } from './animations/vanish'
import { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } from './animations/perspective'
import { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } from './animations/openClose'
@@ -51,7 +52,7 @@ export {
// Rotations
rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight,

// skew
// Skew
skewInRight, skewInLeft, skewOutRight, skewOutLeft,

// Roll
@@ -60,6 +61,9 @@ export {
// Puff
puffIn, puffOut,

// Blur
blurIn, blurOut,

// Vanish
vanishIn, vanishOut,

15 changes: 13 additions & 2 deletions src/utils/animate.ts
Original file line number Diff line number Diff line change
@@ -18,17 +18,19 @@ const animate = (
const defOptions = {
duration: 0.5, // Duration of the animation in seconds
opacity: 0.1, // Initial opacity value
//display: 'none' // Element on hide at initial/end state
delay: 0, // Start the animation immediatey by default
ease: "power1.inOut"
ease: "power1.inOut", // Easing Function
filter: "blur(0px)" // blur effect
}

// Assign element dataset here
const data = target.dataset

// Check if there are any dataset attributes present on the target element
if (Object.keys(data).length > 0) {
alert(typeof data.avDuration)
// Create an options object with values from the dataset or fallback to default values if not present
// These are properties that must be passed as numbers to gsap
const optionsData: Options = {
duration: parseFloat(data.avDuration) || defOptions.duration,
delay: parseFloat(data.avDelay) || defOptions.delay
@@ -44,8 +46,12 @@ const animate = (
return
}

// Define value for fade effect
const fadeOption = options.fade || data.avFade

// Define value for blur effect
const blurOption = `blur(${options.blur || data.avBlur}px)`

// This func maps a custom easing name to a GSAP easing value.
const setEase = (selectedEase: string): string => {
// Define a mapping from custom easing names to GSAP easing values
@@ -85,9 +91,14 @@ const animate = (
...defOptions,
...options,
opacity: parseFloat(fadeOption) || defOptions.opacity,
filter: blurOption,
...properties
}

// Remove properties not needed
delete allProperties.fade
delete allProperties.blur

// Initialize timeline animation of element
const timeline = gsap.timeline()

1 change: 1 addition & 0 deletions src/utils/runtimeChecks.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ export const isValidOptions = (options: Options): boolean => {
(options.duration === undefined || typeof options.duration === 'number') &&
(options.delay === undefined || typeof options.delay === 'number') &&
(options.fade === undefined || typeof options.fade === 'string' || typeof options.fade === 'number') &&
(options.blur === undefined || typeof options.blur === 'string' || typeof options.blur === 'number') &&
(options.ease === undefined || typeof options.ease === 'string') &&
(options.offset === undefined || typeof options.offset === 'string')
}
Loading

0 comments on commit 355646a

Please sign in to comment.