Scale Image or container onViewportEnter ins Wix Studio

Ask the community
, , ,
1

Question:
I want to scale an image or a container when another element enters the viewport and reset it to its original size when it leaves the viewport again. I am new to code in gerneral and tried with the help of Chat GPT and the Wix assistant.

Product:
Wix Studio Editor

What are you trying to achieve:
It is supposed to represent an anchor navigation where the bullet point is slightly enlarged, as seen on this page here (https://www.kartiv.com).

What have you already tried:
Here is some code tried:

$w.onReady(function () {

    $w("#trigger").onViewportEnter(() => {
        $w("#target").scale(1.5, 1.5); // Skaliert das Bild auf 150%
    });

    $w("#trigger").onViewportLeave(() => {
        $w("#target").scale(1, 1);
    });
});

Then I tried to do it with CSS and apply the CSS Class via Velo

$w.onReady(function () {
    $w("#trigger").onViewportEnter(() => {
        $w("#target").addClass("scaleEffect");
    });

    $w("#trigger").onViewportLeave(() => {
        $w("#target").removeClass("scaleEffect");
    });
});

Both did not work since the params are not working for Type Image and Box…

Next up i used the WIX AI Assistant to help me out with my Problem but this code also did not work:

$w.onReady(function () {
    // When the image enters the viewport, scale it up
    $w("#trigger").onViewportEnter(() => {
        $w("#target").style.transform = "scale(1.5)";
    });

    // When the image leaves the viewport, reset the scale
    $w("#trigger").onViewportLeave(() => {
        $w("#target").style.transform = "scale(1)";
    });
});

Does anyone know how to achieve the desired effect? You would be a huge help to me.

2

You can use wix-animations-frontend to do scale effects: Introduction - Velo API Reference - Wix.com