WixAnimation - Timeline not initiated!

Ask the community
1

Hey there :raised_hand_with_fingers_splayed:

After initializing timelines for multiple elements inside a multi-state box, and getting to another state, and then get back to the same state, I get these lines logged to the console.

Timeline play: Timeline not initiated
Timeline play reverse: Timeline not initiated

Here’s the code that initializes the animation when the page is ready.

parent.childeren.forEach(id=> {
    const item = $w(`#element${id}`);
    const timeline = wixAnimations.timeline();
    timeline.add(item, { duration: 150, y: -5 });
    
    item.onMouseIn(() => timeline.play());
    item.onMouseOut(() => timeline.reverse());    
})

I only get the message when I change the state of the box again, where the animation doesn’t work, and print these messages to the console.

I remember a thread from the past where dropdown menus or other components - I don’t really remember exactly - couldn’t keep their values when the state is changed, it might be something similar :man_shrugging:

Anyone from Wix front-end devs can take a look at it, there’s another issue regarding the styling of the components.

Thanks in advance.
Ahmad

2

Hey Ahmad, I’m directing this to the devs. It’ll have to be decided if this is a multi-state or timeline issue.

3

@yisrael-wix thank you!

For now, the temporary solution is to reinitialize the timelines by calling the function again, but then, even though the animation worked, it seems that it worked because it was considered as a different timeline, and the previous timeline keeps logging these messages to the console.

4

Hey Ahmad… I discussed this with the teams involved. It seems that the Multi-State Box was not designed to work alongside other animations, and there is no way to clean up the multiple timeline initializations. Work is being done on a new MSB which will hopefully address this issue. No ETA.

5

Thank you very much you taking care of this issue.
Do you believe creating the timelines as properties inside an object, and setting the object as undefined will clear the old timelines?

6

@ahmadnasriya I was going to suggest trying to set to null or undefined. The only thing is that I really don’t know where the control of the instances is. Worth a try. You might need something grander than a work-around - perhaps a reorg. Hopefully the new MSB will come soon.

7

@yisrael-wix I’ll give that a shot. Thanks heaps :blush:

8

Came around with the same problem, here’s my solution:

import wixAnimations from 'wix-animations';
let isBundleVisible= false;
const obj=[wixAnimations.timeline()]

//This is the box that's being animated
export function box15_click(event) {
    obj[0]=wixAnimations.timeline()
    if (!isBundleVisible){
            obj[0].add($w('#box15'), {y: 60, duration: 700, easing: 'easeInOutQuad'})
        obj[0].play()
        isBundleVisible=true;
        return;
    }
    obj[0].add($w('#box15'), {y: 0, duration: 700, easing: 'easeInOutQuad'})
    obj[0].play();
    isBundleVisible=false;
}
/*Everytime i change the state, the reference to that timeline inside "obj" on index 0 is cleaned, the isBundleVisible variable is also set to false, due to the animated object being on it's initial position when the stateBox is changed*/
export function statebox14_change(event) {
    isBundleVisible= false;
    obj[0]=undefined
}

If u need any helpl, feel free to comment

9

@yisrael-wix any update on the new MSA that will retain the timeline state?