LIVE SITE

Scaled images on hover

Hover, All interactions

import wixAnimations from 'wix-animations';


// image 1 scale animation

const imageTimeline = wixAnimations.timeline();


// image 2 scale animation

const imageTimeline2 = wixAnimations.timeline();


// image 3 scale animation

const imageTimeline3 = wixAnimations.timeline();


$w.onReady(function () {


    // image 1 scale animation

    const image = $w('#image1');


    imageTimeline


        .add(image, { 'scale': 1.1, 'duration': 600, easing: 'easeInOutSine' });


    image.onMouseIn(() => {


        imageTimeline.play();


    });


    image.onMouseOut(() => {


        imageTimeline.reverse();


    });


    // image 2 scale animation

    const image2 = $w('#image2');


    imageTimeline2


        .add(image2, { 'scale': 1.1, 'duration': 600, easing: 'easeInOutSine' });


    image2.onMouseIn(() => {


        imageTimeline2.play();


    });


    image2.onMouseOut(() => {


        imageTimeline2.reverse();


    });


    // image 3 scale animation

    const image3 = $w('#image3');


    imageTimeline3


        .add(image3, { 'scale': 1.1, 'duration': 600, easing: 'easeInOutSine' });


    image3.onMouseIn(() => {


        imageTimeline3.play();


    });


    image3.onMouseOut(() => {


        imageTimeline3.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.