Zoom-In Effect
Add a hover animation to repeater items
Beginner
5K
Published:
December 27, 2020
Example Description
In this example, site visitors can create a zoom in effect by hovering over images in a repeater. This example is a great starting point for working with the Animations API.
How We Built It
Database Collection
Pictures: For storing the images displayed in the repeater.
Data Connection
Pictures dataset: For connecting the repeater to the images in the database collection.
Page Elements
I used the following page elements on the site:
Repeater: For displaying the images.
Image: Displays the images from the database collection in each repeater item.
Code
I added the following code to the site:
Import functionality for working with animations.
When the repeater items are ready to load, do the following:
When a site visitor hovers over an image, add a scale (zoom in) animation to the timeline and play the timeline.
When a site visitor moves away from the image, add a reset scale (zoom out) animation to the timeline and play the timeline.
Related Examples
Did this help?
|
Thanks for your feedback!
Animations Viewer
Use show/hide effects to change the animation applied to an image.
Intermediate
Image and Text Animation
Use wix-animations API to animate images and text.
Intermediate
Hide & Show Elements
Hide and show elements in response to user interactions.
Intermediate