Inview Animation Blink

Wappler General Bugs
#1

I notice that after update 6.3.3 the inview animations blink before the animation is done. like show for some miliseconds the original element and then create the animation. I will record the page to show you but I need to finish the product first.

Is not the best video but take a look t the bottom of the video that elements ale exposed and then fade.

Grabación de pantalla 2024-03-23 a la(s) 20.13.01

here is another video

Grabación de pantalla 2024-03-23 a la(s) 20.19.12

I hope you can notice the blink

#2

https://www.somosdestino.love/

please take a look to online demo

#3

I don’t see anything wrong with the demo at all? All animations are smooth.

#4

All the animations are loading smoothly. I haven’t noticed any additional element on the screen while scrolling.

#5

I tested on Iphone and on my computer and blink. 2 different computers and two iphones. on a new computer is smooth. I dont know why. Can someone help me test on phone?

#6

Here is a more clear video from my Iphone. Take a look to the bottom and bow it blinks

RPReplay_Final1711253877

#7

I dont know if the video upload correctly but his is on vimeo. I upload there.

#8

I can notice the letters JB fading in and out on the phone. I have also noticed a downward layout shift when the text for Juan Pablo is in view. The layout shift happens on both phone and desktop.

#9

This video is from other phone. And is evident the blinking when you are scrolling.

Is like the elements for a fraction of time are in the final position and then create the fade.

#10

Try these start and delay values for your inview animations…
image

#11

I have tried the suggested values and the blink persist. Any other suggestion @Teodor?

#12

Have you got Adblock or UBlock Origin extensions? Try disabling those for the domain/local environments. Am sure we had an issue like this and was down to browser extensions…

#13

But I tried on iPhone and is more notorious there. I tried in different computers browsers and phones. I think is the way it renders on scroll. Maybe I need to go two steps back and use other thine AOS transitions

#14

Is that the beta or stable extensions channel?

#15
#16

Could you check if the following update improves the animation:

dmxAnimateCSS.zip (6.1 KB)

#17

On desktop seems to fix the problem. On phone still the same blinks when you scroll. Tested on 3 different phones.

@patrick You can test in this link.

#18

I am in beta channel.

#19

Maybe cache? What about incognito mode?
Tested and seems fine on chrome (Android)

#20

Tested in incognito. On Chrome and safari to be sure. Also tree different phones and have the same issue.