vue-rectangle-reveal

A Vue.js 2.0 component to reveal elements with a trending rectangle shape animation

Demo

Live demo

Coming soon

Installation

NPM

 npm i --save vue-rectangle-reveal

Example

💁 You can reveal whatever element you want, whether they are texts, images and so on... Here is the easiest way to use this component :

    <template>
        <vue-rectangle-reveal>
            <h1>My text to reveal</h1>
        </vue-rectangle-reveal>
    </template>
        
    <script>
        import VueRectangleReveal from "vue-rectangle-reveal";
        
        export default {
            components: {
                VueRectangleReveal,
            },
        };
    </script>

What is in the default slot of the component will be invisible at the beginning, then covered by the animating rectangle shape, to eventually be revealed.

Here is a more complete example if you want to control the behavior of the component the way you like 🙆‍♀️ :

    <template>
        <vue-rectangle-reveal ref="imageRectangleReveal" 
                              :delay="0.5" 
                              :duration="1.5" 
                              color="#d7a19e">
            <img src="path/to/my-image.jpg" width="700px" height="auto"/>
        </vue-rectangle-reveal>
    </template>
        
    <script>
        import VueRectangleReveal from "vue-rectangle-reveal";
        
        export default {
            components: {
                VueRectangleReveal,
            },
            mounted(){
                setTimeout(async() => {
                    await this.$refs.imageRectangleReveal
                        .setDelay(0.3) // set the delay on the fly
                        .setDuration(1.2) // set the duration on the fly
                        .animateOut();
                    
                    //Do something when the animation is done
                    console.log("done")
                },6000)
            }
        };
    </script>

Props

name	type	description	required	default value
duration	Number	The duration of the animation in seconds	false	1.2
delay	Number	The delay of the animation in seconds	false	0
easing	String	The easing to use for the animation	false	"1.000, 0.000, 0.000, 1.000" /* easeInOutExpo*/
color	String	The color of the rectangle shape, with the css color format	false	"black"
autoPlayAnimation	Boolean	Whether the animation is to be played automatically	false	true
direction	String	The direction in which the animation is done (can be "right","left","top","bottom")	false	"right"

Methods

Name	Description	Params	Returns
animateIn	Play the animate-in animation		a Promise resolved when the animation is done
animateOut	Play the animate-out animation		a Promise resolved when the animation is done
setDelay(delay)	Set the delay of the animation in seconds	delay : the delay to set	the component so that you can chain its methods
setDuration(duration)	Set the duration of the animation in seconds	duration : the duration to set	the component so that you can chain its methods

Events emitted

Name	Description
animationEnd	Fired when the animation is done

Contributing

Contributions are welcome ! Follow the instructions in the contributing file

License

MIT