Animation on Scroll

Discussion Ask a question
,
1

Hi,

Can someone guide me on how to achieve this kind of effect. Here
I don’t even know what this effect/ animation called as.
I tried OnViewportEnter/ Leave using anchor but I failed.

FYI: I don’t know much about javascript / WiXCode. I just learnt how to get sticky header via few Youtube.

Thanks,
Pawan

1 Like
2

Did you get it to work?

3

Hi,
Currently this cannot be achieved with Wix Code…
But, I think you should consider using some strips with parallax effects (contact Wix Support for more help).

Liran

4

This is what I’ve achieved after 1 week of struggle. Its a combination of script and animation.

It’s so unfortunate that WiX hide/ hidden code doesn’t support its own native animation… also ‘expand and collapse function’ in my experience doesn’t support native animations.

If in case you don’t see animation below check here Monosnap

https://static.wixstatic.com/media/a27d24_c288c0fdb44d497c99c406bf4faf10d2~mv2.gif(image larger than 4 MB)

2 Likes
5

Hi Pawan,

I am looking to incorporate something similar with my text. Can you please share with me how you achieved it. This is what I have been able to accomplish with the following code

export function text27_viewportEnter(event, $w) {
//Add your code for this event here:
let floatOptions = {
“duration”: 1200,
“direction”: “left”,
“delay”: 0
};
$w(" #text27 “).hide();
$w(” #text27 ").show(“float”, floatOptions);
}

However, the text animates with a flicker and sometimes shows up twice while steady on the same view.

Thanks!

6

Hi Karunarohra,

That’s what I was struggling to remove; flickers and its erratic behaviour.
FYI: I’m not a coder and this is truly based on my hit and trial method.

What I’ve used: 2 anchors sitting very close at just 15-20px apart with function viewport enter and leave.

  1. 1st anchor (Leave) is set to slow closed container. This is to avoid flicker and erratic behaviour.
  2. 2nd anchor (Enter) is set to show closed container keeping everything hidden.
  3. 2nd anchor (Leave) is set to hide closed container and show all other components with its native animation.

I hope this helps.

Since WiX is not pixel perfect it looks horrible on smaller screen and also at 4k display. This only holds good if you are at 1920x1080 resolution display.

Thanks,

1 Like
7

Can you guys please turn this into a feature request or is there one already posted for it where I can vote? I need this natively outside of html iframe for regular element. Almost crucial with Wix Code now in terms of visual effects. Onviewportenter, have item appear and then upon certain amount of scrolling keep it in place while able to “scroll/animate” other objects into appearance or disappearance at various points of the scroll (either via mouse or via keyboard or via touch) on page. I would like to know if this is something that is actually planned to be available in the future as part of Wix Code API.

Thanks

8

Thanks Pawan. Used a combination of only one anchor and strip viewport leave to achieve desired effect in my case. I still get flicker but only the first time and subsequent animations on scroll are stable.

9

Can you send me the code for this animation

10

@kumarkaushik1580 Sorry for my late revert. Here is the code.
Just remember this make your website run super slow.
My customer was happy with the design, but cos of WiX performance we’d to remove this animation.

export function Container_viewportLeave() {
$w(“#maincontainer”).show();
}

export function Container_viewportEnter() {
$w(“#maincontainer”).show();
$w(“#container”).hide();
$w(“#cap”).hide(“CollapseOut”);
$w(“#green”).hide(“CollapseOut”);
$w(“#red”).hide(“CollapseOut”);
$w(“#blink1”).hide();
$w(“#blink2”).hide();
$w(“#blink3”).hide();
$w(“#blink4”).hide();
}

export function split_viewportLeave() {
$w(“#maincontainer”).hide();
$w(“#container”).show();
$w(“#cap”).show();
$w(“#green”).show();
$w(“#red”).show();
$w(“#blink1”).show();
$w(“#blink2”).show();
$w(“#blink3”).show();
$w(“#blink4”).show();
}

export function blinkdrop_mouseIn() {
$w(“#droptest”).show();
}

export function blinkdrop_mouseOut() {
$w(“#droptest”).hide(“fade”);
}

export function blink2_mouseIn() {
$w(“#Stacking”).show();
}

export function blink2_mouseOut() {
$w(“#Stacking”).hide(“fade”);
}

export function blink3_mouseIn() {
$w(“#leakproof”).show();
}

export function blink3_mouseOut() {
$w(“#leakproof”).hide(“fade”);
}

export function blink4_mouseIn() {
$w(“#Vacuum”).show();
}

export function blink4_mouseOut() {
$w(“#Vacuum”).hide(“fade”);
}