
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

Appearing Hot Dog
Jonathan Tsodikovitch
