Can't get animation to repeat while scrolling the website

Ask the community
,
1

Hi,
I need help in getting animations to occur everytime on scrolling and as the element becomes visible instead of only one time per viewing session. This is what I have tried but can’t seem to make it work consistently. Plus after the animation, there is a sort of flicker or bolding effect which doesn’t look good. Need a seamless transition. Thanks.

export function text27_viewportEnter(event, $w) {
//Add your code for this event here:
let floatOptions = {
“duration”: 1200,
“direction”: “left”,
“delay”: 0
};

$w("#text27").hide(); 
$w("#text27").show("float", floatOptions);

}

Animation flickers and sometimes shows up twice while steady on the same view.

2

Then check when animation is done using its promise return.

3

Hi Andreas, what should I check for?

4

Hi,
In order for us to successfully review this matter further and properly assist you, please send us a video of the issue using screencast . Simply recreate the issue while recording the steps. Add the screencast.com URL to your response. Moreover, please send us the site URL and the name of the page so that we can have a look.

Thanks,
Tal.

5

Even I have same issue like Karunarohra. I applied an animation to an image and that animation appears only once when I’m scrolling down, but again if I scroll up and try to see that animation, It not working. only image appears without animation. if I have to try that animation again I need to refresh the page. why is this happening on wix? I want the animation to appear every time I scroll on that image!

6

Try using https://www.wix.com/corvid/reference/wix-animations API, maybe you can play animation when element enters viewpoint

7

@viktoriian I’m sorry but I don’t know to how to use java codes, I’m using drag and drop ways to build website. Is there any other way possible?

8

@eagleclaws0123

Hello eagle claws,

this should be what you are searching for…

https://russian-dima.wixsite.com/meinewebsite/simple-animation

Just scroll up & down your mouse-wheel…

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

export function anchor1_viewportLeave(event) {$w('#image1').hide('float')}
export function anchor1_viewportEnter(event) {$w('#image1').show('float')}
9

@russian-dima I tried this code and it did not work. I am also trying to have the animation (a wavy line that appears from the left) to animate more than once without refreshing the page. I want the animation to happen when scrolling down and then when scrolling up. Since I am using a reveal and not the float animation, I changed the code to the following and my image name is “wavyline”. Suggestions? BTW, I am not a coder.

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

export function anchor1_viewportLeave ( event) { $w ( ‘#wavyline’ ). hide ( ‘reveal’ )}
export function anchor1_viewportEnter ( event ) { $w ( ‘#wavyline’ ). show ( ‘reveal’ )}

10

Very interesting !

11

To be able to see results —> ZOOM your screen —> than SCROLL your PAGE.

12

Nice info !