Trigger an animation on "focus"

Ask the community
, , , ,
1

That easy. I want a trigger that acts only when the desired element (e.g. a “Section” appears in focus in the center of the screen). The thing is, I could use the “Hover” trigger… but that’s absolutely useless on mobile. Even unpredictable behavior on desktop, as the user could scroll around the site without the pointer on the page.

“Scroll” also doesn’t work as I only want to show when the center of the desired component enters the center of the screen.

Thank you in advance.

Product:
Wix Studio

What are you trying to achieve:
The behavior/trigger should fire only when the desired element (e.g. a “Section” appears in focus in the center of the screen).

What have you already tried:
All other effects/triggers. But doesn’t fit my needs

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

You mention when it enters the screen but also when it reaches the center, so not sure which is the exact need.

That being said, most elements have an .onViewportEnter() and .onViewportEnter() which might work for your needs depending on which of the above it is :slight_smile:

1 Like
3

Hey! thanks for your quick reply, I’ll try coding :slight_smile:

So… what I’m looking for is some kind of “fade in and out” effect that I want to trigger on all containers, after they have passed the center of the screen (or a certain treshold).

For example, I have all the containers in black and white with static animations. When they pass the center of the screen their color is revealed and the animations are triggered… when the user continues scrolling, that container would return to its previous B/W state, giving way to the next container appearing below the screen… displaying colors and triggering its own animation… and so on for each container (and scrolling in reverse would do the same)

The “scroll effects” would work, but the container no longer returns to its initial position when it disappears below the header…

Thanks!
Edu Couchez

4

Hey… tried and works! :slight_smile:

Even, better coding now, that I’ve moved the development process right in VS Code, faster and more reliable than Wix Studio.

BTW: I assumed you were wrong when you proposed the two methods “.onViewportEnter() and .onViewportEnter()”. I suppose you meant “.onViewportLeave()”