Scroll-controlled animation for GIF frames

Ask the community
, , ,
1

Hello Wix Community,

I’m currently working on a project in the Wix Code Editor, where I aim to create a scroll-controlled animation that displays image frames sequentially in a manner similar to a GIF. I’ve successfully obtained the value of scrollY, but I’m encountering challenges when implementing an event handler to control the image visibility.

Being relatively new to JavaScript, I suspect there might be some obvious mistakes in my code. I would greatly appreciate any guidance or suggestions and whether it’s possible or not.

Here’s my code:

import wixWindowFrontend from 'wix-window-frontend';

let currentFrame = 0; // Start with the first image in the range
const endFrame = 17; // Set the last image in the range

function updateFramesVisibility() {
  wixWindowFrontend.getBoundingRect()
    .then((windowSizeInfo) => {
      const scrollY = windowSizeInfo.scroll.y;

      // Calculate the height of each frame
      const frameHeight = windowSizeInfo.window.height / (endFrame - currentFrame + 1);

      // Calculate the index of the current frame
      const newFrame = Math.floor(scrollY / frameHeight) + currentFrame;

      // Update visibility only if the frame is within the specified range
      if (newFrame >= currentFrame && newFrame <= endFrame && newFrame !== currentFrame) {
        // Hide the previous frame
        $w(`#image${currentFrame}`).hide();

        // Show the new frame
        $w(`#image${newFrame}`).show();

        // Update the current frame
        currentFrame = newFrame;
      }
    });
}

$w.onReady(function () {
  // Set up scroll event handler
  wixWindowFrontend.onScroll(updateFramesVisibility);
});
2

wixWindowFrontend.onScroll(updateFramesVisibility);

This is not given in the API of wix-window !!! —> (By the way → WHY ???)

However, you still can achieve your aim, using → setInterval() <–.

This way you can generate your own —> onScroll() functionality.

Pay attention with setInterval() → it will slow down your system rapidely if you set it to a high checking time-ratio → the lower the value of milliseconds, the more it will slow down your system.

setInterval() + Y-VALUE of getBoundingRect = SOLUTION !!!

@Wix → surely a highly used usecase → adding an additional SCROLL-EVENT???
And again we can see lack of scroll-functionality on wix-sites!

By the way → the same for DRAG-&DROPS !!!

3

Awesome. Yeah, I figured it’s not part of the API, was just keeping it to illustrate what I wanted to do. I’m a beginner in JavaScript :).

thank you! @russian-dima

1 Like
4

No problem, you are maybe beginner in JS, but regarding your already generated code, tells me that you surely know other programming languages.

C++, Phyton, PHP, VBA ?

5

Yeah, just some Python for engineering purposes. Also, it’s my first day working with WIX API. Appreciate your help!

1 Like
6

What i like on your code —> clean, structured and with good comments.
What is missing → CONSOLE-LOGS !!! (very important)

1 Like