Animating all elements on timeline at the same time

Ask the community
1

Hi…
I am trying to animate 3 elements at the same time, but I simply can’t wrap my head around how to do this.
The elements play in order of the code… How do I get them to execute all at once?

My code is this:
import wixAnimations from ‘wix-animations’ ;

$w.onReady( function () {
explodeOnHover();

});

function explodeOnHover() {
$w( ‘#image1’ ).onMouseIn((event) => {

    wixAnimations.timeline() 
        .add($w( "#image1" ), {

“scale” : 1.2 ,
“easing” : “easeInQuint” ,
“duration” : 500
})
.add($w( “#vectorImage2” ), {
x: - 100 ,y: - 100 ,
“easing” : “easeInQuint” ,
“duration” : 500
})
.add($w( “#vectorImage3” ), {
x: 100 ,y: 100 ,
“easing” : “easeInQuint” ,
“duration” : 500
}).play();
})
$w( ‘#image1’ ).onMouseOut((event) => {

    wixAnimations.timeline() 
        .add($w( "#image1" ), {

“scale” : 1 ,
“easing” : “easeInQuint” ,
“duration” : 500
})
.add($w( “#vectorImage2” ), {
x: 0 ,y: 0 ,
“easing” : “easeInQuint” ,
“duration” : 500
})
.add($w( “#vectorImage3” ), {
x: 0 ,y: 0 ,
“easing” : “easeInQuint” ,
“duration” : 500
}).play();
})
}

2

Hey Sebastian,
the timeline is built quite simply as a timeline so when adding animations it works sequentially. In order to make all the animations to work at the same time you need to set all the animations offset to 0 (except the first one),this is added as a third argument to the add() function.
also in this particular case it’s better to first define the timeline outside the in and out functions, this will prevent animations to “overlap” one another, and it’s also cleaner code.

import wixAnimations from 'wix-animations';

$w.onReady(function () {
    explodeOnHover();

});

function explodeOnHover() {

 let timeline = wixAnimations.timeline().add($w("#image1"), {
 "scale": 1.2,
 "easing": "easeInQuint",
 "duration": 500
        })
        .add($w("#vectorImage2"), {
            x: -100,
            y: -100,
 "easing": "easeInQuint",
 "duration": 500
        },0)
        .add($w("#vectorImage3"), {
            x: 100,
            y: 100,
 "easing": "easeInQuint",
 "duration": 500
        },0)
 
    $w('#image1').onMouseIn((event) => {

        timeline.play();
    });

    $w('#image1').onMouseOut((event) => {

        timeline.reverse();
    });
}
3

WOW… So awesome!
Thank you so much. Was hitting my head with this one… Makes perfect sense :slight_smile:

4

@sebastian308 Glad I could help! :grinning: