Loading Repeater with Animation

Ask the community
,
1

Dear Community

To achieve a horizontal navigation triggered by clicking on a left/right button i am using a repeater. The repeater initially loads each slide in an animation and i dont manage to deactivate this animation. If I try to change the animation in the repeater settings nothing happens.

can i change this in the code?
could somebody assist me with this issue?

below i attached what´s happening before $w.onReady

thank you very much

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

$w.onReady(function () {
2

"The repeater initially loads each slide in an animation " What does it mean? What animation? Have you set this animation using Velo code?

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)
            }

        })
    })
})
4

Do you want to completely remove the animation? So delete all the animation-related code.

5

@jonatandor35 I want to keep the animated part which is triggered onclick.
(Repeater slides to the left and to the right by clicking on the arrow)

And i would love to get rid of the animated initial loading of the repeater slides. (Repeater slides initially opens with an expand-in animation, each slide does that one time and after that they behave as desired)

I would like to open the page on the center slide without any animation and then being able to “animated-slide” to the first repeater slide by clicking on the left arrow and to “animated-slide” by clicking on the right arrow.

thank you very much

6

@janeisenring
Where did you get the code for animating the repeater when clicking the left-right arrow. Want to have this on my site too, but I’m not sure on how your code works is there a video for doing this?