Skip to content

rgk/AVPE

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

92 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AVPE

Anime.js Vue Particle Explosion

AVPE Example

Prop Type Default Function
amountMax Number 100 Minimum amount of particles to emit.
amountMin Number amountMax Minimum amount of particles to emit.
blendMode String "overlay" Sets the blend mode of the particles.
borderRadiusStart Number 0 Sets the border-radius property on the particle at the start.
borderRadiusEnd Number "1px" Sets the border-radius of the particle at the end.
boxShadow String "0 0 2px rgba(255, 255, 255, 0.123)" Sets the CSS box-shadow property on the particles.
colorStart String "random" Starting color, do not use literal values like 'red', has 'random' option.
colorEnd String "random" Ending color, do not use literal values like 'blue', has 'random' option.
config Object {} An Anime.js config which will be merged with the default.
defaults Boolean TRUE Use default options, which can still be overwritten by config options.
durationMax Number 500 Duration of animation, max value if durationMin is set, in ms.
durationMin Number durationMax Minimum duration of animation, defaults to the value of durationMax, in ms.
ease String "easeInBounce" Main ease function. (https://easings.net/)
easeBackgroundColor String ease Specific ease function for backgroundColor.
easeBorderRadius String ease Specific ease function for borderRadius.
easeFilter String ease Specific ease function for filters.
easeHeight String ease Specific ease function for height.
easeWidth String ease Specific ease function for width.
easeOpacity String ease Specific ease function for opacity.
easeRotate String ease Specific ease function for rotate.
easeX String ease Specific ease function for translateX.
easeY String ease Specific ease function for translateY.
filterStart String "blur(1px)" CSS filter value(s) for the start of the effect, make sure they match filterEnd.
filterEnd String "blur(0px)" CSS filter value(s) for the end of the effect, make sure they match filterStart.
opacityStart Number 1 Opacity to start the particles at.
opacityEnd Number 0 Opacity to end the particles with.
radiusMax Number 50 Maximum radius of particle explosion.
radiusMin Number radiusMax Minimum radius of particle explosion.
rotateMax Number 0 The maximum rotate amount in degrees, can be negative.
rotateMin Number rotateMax * -1 The minimum rotate amount in degrees, can be negative.
sizeWidthStart String "2px" Start width of the particle, use CSS sizing, '2px' for example.
sizeHeightStart String sizeWidthStart Start height of the particle, use CSS sizing, '2px' for example.
sizeWidthEnd String "1px" End width of the particle, use CSS sizing, '1px' for example.
sizeHeightEnd String sizeWidthEnd End height of the particle, use CSS sizing, '1px' for example.
zindex Number -1 Sets the z-index of the particles so you can place them behind values.

About

Anime.js Vue Particle Explosion

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages