Loading Repeater with Animation

Ask the community
,
3

i guess i must have, but i have no clue how

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

$w.onReady(function () {

 const repeater = $w('#repeater1');
    $w('#dataset2').onReady(async function () {
 
        repeater.forEachItem(($item, itemData, index) => {
 

 let counter = 1;
 let animationComplete = true;
 let repeaterMove = ($w('#repeater1').data.length) / 1;
            console.log(repeaterMove);
            $w('#arrowright').onClick(() => {

 if (counter < repeaterMove - 0 && animationComplete) {
                    animationComplete = false;
                    counter++;
                    wixWindow.getBoundingRect()
                        .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width; // 
                            wixAnimations.timeline().add($w('#repeater1'), { x: `-=${windowWidth}`, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => {
                                animationComplete = true;
                            });
                        });
                }

            })

            $w('#arrowleft').onClick(() => {

 if (counter > 0 && animationComplete) {
                    animationComplete = false;
                    counter--;
                    wixWindow.getBoundingRect()
                        .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width; // 
                            wixAnimations.timeline().add($w('#repeater1'), { x: `+=${windowWidth}`, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => {
                                animationComplete = true;
                            });
                        });
                }

            })

 var initWidth;

            wixWindow.getBoundingRect()
                .then((windowSizeInfo) => {
                    initWidth = windowSizeInfo.window.width; // 
                    console.log(initWidth)
                    screenChange();
                })

 function screenChange() {
                wixWindow.getBoundingRect()
                    .then((windowSizeInfo) => {
 let rWidth = windowSizeInfo.window.width; //
 if (rWidth !== initWidth) {
                            console.log('inside if')
 let repeaterPosition = counter * rWidth;
                            console.log(repeaterPosition);
                            wixAnimations.timeline().add($w('#repeater1'), { x: -repeaterPosition, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => {
                                animationComplete = true;
                            });
                            initWidth = rWidth;
                        }
                    })
                setTimeout(() => {
                    screenChange();
                }, 50)
            }

        })
    })
})