Scroll Animation Fade on Self

Ask the community
,
1

Question:
I’m using the Fade on Self animation for an image, which works nicely but there’s a slight bug where the image flashes briefly when the site loads and then animates. How do I prevent this “flash” on page load?

Product:
Wix Editor

What are you trying to achieve:
Trying to use the fade on self animation so the image fades in as the user scrolls down the page.

What have you already tried:
The animation works well, except for the brief flash. I’ve tried changing the animation area and starting opacity to 0%

Additional information:
website for reference, the animation is at the top of the page: www.themtgspot.com/home

3

Hi, David2 !!

As a basic workaround, try setting the target element of the animation to be hidden by default (select the element and set its initial state to hidden in the properties). Then, in $w.onReady(), add a process to make it appear using .show().

The reason for this flash issue is that the fade animation is applied only after the page loads, causing the element to momentarily appear. By setting it to hidden by default, it should no longer be visible initially. However, if you leave it in the hidden state, it will remain invisible even after the page loads. To avoid this, add a process to make it appear with .show() after the element has finished loading. :raised_hands:

$w.onReady(function () {

    $w("#targetElement").show();

    // OR

    setTimeout(()=>{
        $w("#targetElement").show();
    },500); // you can change this value about 250-2500

});