Lottie code not working

Ask the community
1

Hi all,

I am currently trying control a Lottie element by using the code. For some strange reason, not all parameters of the code work. For instance ‘speed’ works fine, but play() or stop() in the same page, simply doesnt work.

Interesting detail, when code hint shows up as ‘$ w.Audio Player’ after I enter .play(). And in auto complete of the code ‘play()’ doesnt show up.

Could it be that some sort of library is missing for full Lottie control? These are the ones on top of my code:

import wixAnimations from ‘wix-animations’;
import wixWindow from ‘wix-window’;

Any help is appreciated! Thanks!
2

Hey!

Are you able to share your full code?

I’d also recommend asking on the Velo forum for code related issues :slight_smile:

3

Hi Noah! Yeah sure thing!
Added it below and also an additional screenshot of it with notes if that helps.
You’ll see that I’ve set the Lottie element to .stop(); and commented out the trigger for it to play. However, the result is that it just plays regardlessly (so, it’s ignoring the stop() function.

Wasn’t aware of the Velo forum, thanks for pointing that out!

Full code on my current site

import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';

let navTimeline;
let screenSizeInterval;


$w.onReady(function () {

    //Lottie does not play yet 
    $w('#lottieExample').stop();
    
    $w('#navOpenDiap').show();
    $w('#navOpen').hide();
    $w('#nav').style.backgroundColor = "rgba(224,235,82,0)";

// SIDE MENU ITEMS HOVERS
    $w('#linkFilms').onClick(() => {
            $w('#nav').style.backgroundColor = "rgba(10,8,8,1)";
            $w('#navOpen').show();
            $w('#navOpenDiap').hide();
            clearInterval(screenSizeInterval);
            navTimeline = wixAnimations.timeline().add($w('#nav'), { x: 0, duration: 300, easing: 'easeInOutCubic' }).play();
            
            open = false;
        
    })


//CLOSE / OPEN SIDE MENU
    let open = false;
    $w('#navClick').onClick(() => {
        if (open == false) {
            screenSize();
            screenSizeInterval = setInterval(screenSize, 700)
            open = true;
        } else {
            $w('#nav').style.backgroundColor = "rgba(10,8,8,1)";
            $w('#navOpen').show();
            $w('#navOpenDiap').hide();
            clearInterval(screenSizeInterval);
            navTimeline = wixAnimations.timeline().add($w('#nav'), { x: 0., duration: 300, easing: 'easeInOutCubic' }).play();
            
            open = false;
        }
    })

    function screenSize() {
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
                let windowWidth = windowSizeInfo.window.width;
               navTimeline = wixAnimations.timeline().add($w('#nav'), { x: -(windowWidth * 0.9502), duration: 200, easing: 'easeInOutCubic' }).play();
               $w('#nav').style.backgroundColor = "rgba(224,235,82,1)";
                     $w('#navOpenDiap').show();
                      $w('#navOpen').hide();

            });
    }

   // $w("#lottieExample").onViewportEnter( (event) => {
   // $w('#lottieExample').play();
   // });

});

1469×1170 156 KB