LIVE SITE

Buttons micro animation

Micro Animation, All interactions

import wixAnimations from 'wix-animations';


const glideTimelineBtn = wixAnimations.timeline();


const glideTimelineBtn2 = wixAnimations.timeline();


$w.onReady(function () {

    

    //card 1 button animation (from the left)

    const glideBtn = $w('#btn1');


    glideTimelineBtn


        .add(glideBtn, { 'y': 4.1, 'x': -4, 'duration': 200 })


    glideBtn.onMouseIn(() => {


        glideTimelineBtn.play();


    });


    glideBtn.onMouseOut(() => {


        glideTimelineBtn.reverse();


    });


//card 2 button animation (from the left)

    const glideBtn2 = $w('#btn3');


    glideTimelineBtn2


        .add(glideBtn2, { 'y': 5, 'x': -6, 'duration': 200 })


    glideBtn2.onMouseIn(() => {


        glideTimelineBtn2.play();


    });


    glideBtn2.onMouseOut(() => {


        glideTimelineBtn2.reverse();


    });



});



Explore more Hover interactions 

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Add a Title

Add a Title

Tags

Sites on X | © 2021 made with ❤️ on Editor X.