Is there anyway to customize animations and effects duration beyond 4 seconds?

Ask the community
, , ,
1

Hi everyone, I’m working on a project in Wix, and I’m using the built-in ‘Entrance’ > ‘Reveal on Self’ animation effect for a vector image. However, the maximum duration for this effect is capped at 4 seconds in the Wix Editor, and I need it to last at least 10 seconds.

I’ve already enabled Dev Mode and tried so many codes, and there’s nothing :frowning:

Does anyone know if it’s possible to:

  1. Adjust the Reveal on Self animation settings (like duration) using code?
  2. Override the 4-second limit programmatically or via any other method?

I’ll appreciate anything could help!

2

Hi, user4431 !!

Please define a class for a reveal animation lasting more than 10 seconds in global.css. Then, write Velo code to detect when a vector image element enters the viewport using onViewportEnter. Upon detection, apply the reveal animation to the vector image element by using $("#vectorImageElemId").customClassList.add("revealAnimeClassName"). This approach might work. :thinking:

$w.onReady(function () {

  $w('#vectorImageElemId').onViewportEnter(() => {
    $w('#vectorImageElemId').customClassList.add('revealAnimationClassName');
  });

});
4

Bro!! Thank you so much I’ve been stuck on this issue for almost three days, and I never thought of using global.css at all until you suggested it! This solution worked perfectly, and I’m so grateful for your help. :pray:

For anyone else facing this issue, here’s exactly what I did:
Velo Code:

$w.onReady(function () {
  $w('#vectorImageElemId').onViewportEnter(() => {
    $w('#vectorImageElemId').customClassList.add('revealAnimationClassName');
  });
});

CSS in global.css:

@keyframes revealFromLeft {
  0% {
    clip-path: inset(0 100% 0 0); /* Fully hidden */
  }
  100% {
    clip-path: inset(0 0 0 0); /* Fully visible */
  }
}

/* Create a class for the reveal animation */
.revealAnimationClassName {
  animation: revealFromLeft 10s ease-out; /* 10-second animation with ease-out */
}

Just make sure your element ID exists on the page and is ready to animate

2 Likes
5

Hello @user4431

Thanks for posting your solution. I am running into a somewhat similar problem and was hoping you can provide some guidance.

I have a repeater element that uses the animation: loop → cross, and the duration is set to 50 seconds (the max allowed from the wix-studio interface).

image
image641×787 50.4 KB

Is there a way to alter the duration to a higher number (i.e 70 seconds) via the same approach that you took? If so, what would the code for the customclass look like?

Truly appreciate any help you can provide

Looking Forward

SkreenGG