How to create fade-in / reveal on scroll?

Ask the community
,
1

Hi there,

So I’d love to create this scroll-effect on my website:
https://youtu. be/aoGMFbWJ2aU (first 10 seconds)

Would that be possible with corvid?

FYI → I’m a rookie with code.

Many thanks,
Ruben

2

I think you can do that with animations, probably not as responsive as the video but it works, so simply add animations to your elements, no code required.

If not, you can add onViewPortEnter event trigger for your elements and then .show() with an animation. But you need to trigger on a visible item or an anchor in order or it to work.

3

Thanks Carlos.

I tried with animations, but that’s not quite the same effect.
The effect i’m looking seems to be a combination of a Move (up) and Fade-in animation.

I read about onViewPortEnter. Could you tell me a bit more in detail how to set the trigger and the “show()”?

4

@rodeborst Ok, I took a look at the video, what they’re doing can be easily accomplished with animations API basically follow the same steps on the video, create the onViewPortEnter trigger and then add animation on your code panel

5

As Carlos has mentioned already you can create it all with different events happening with onViewport, or you can use Wix Animations API which gives you more control and finesse on what you want to achieve.

This old example from Wix (2018) gives you a good idea of it too.
Wix Design Tutorials: Creating a Multi-Layered Parallax Site
https://support.wix.com/en/article/enabling-parallax-scrolling-on-your-strip

6

Thank guys, got it working now !