Want to create a cool interactive repeater with multiple animations that light up your site… Just like this "Meet our team" one? Keep watching as we recreate it from scratch, And build along if you like.
First, we’ll add a section and turn on Advanced settings here in the Inspector panel to give us more control when it comes to sizing.
Let’s set the height of our section to 100vh.
I’ll apply an advanced CSS grid to our layout to give us even more control of the grid and its elements.
We’ll divide our grid into two rows.
Okay, let’s add some imagery. We’ll drag this one from the Add Panel, stretch it from the corner and expand it across both cells.
Now we’ll update the image and choose this gray background.
Next, add a title. We’ll change the text color to white, its size to 100 pixels, and center it. I’m gonna choose Daubenton Regular for our font, but feel free to choose another. We’ll update our text.
Let’s select Max Content for our first row so it scales properly across different breakpoints.
For our second row, we’ll go with Auto.
Right, time to add our repeater. We’ll drag it from the Add panel and change it from Cards to Slider.
And let’s turn on Advanced settings here too, set the width of repeater’s items to 100 percent and align to center.
We’ll give the items some breathing room by setting the gaps to 16 pixels.
And add 3 percent padding on all sides to keep everything in place.
I’ll dock the repeater to the right and add 1.5 percent margins.
Now set the size of each repeater item to 224 x 448 pixels and add more to give us that carousel effect.
Okay, let’s bring in some visual elements to our first item. We’ll start with these border lines, reduce their size and reposition them.
And then add our team members. We’ll start with this silhouetted profile, which we’ll need for our hover effect. We’ll resize it slightly, giving it a height of 380 pixels and center it. We’ll then update the other profile images.
Add this small strip, bring it to the front and position it to the bottom left.
Let’s drag across some text. We’ll change it to white, resize it and update it to the same font as our title. We’ll type in the team member’s name and then add the silhouetted profile images for each one.
We’ll also set our background’s fill & opacity to 0 percent to remove the white background from the images.
Now to work on the foreground images. We’ll start by adding a container to the first item and click Stretch.
We’ll change the color to this strong orange.
And add the profile image to the first container. We’ll resize and reposition it.
Same again with the small strip.
We’ll duplicate this one too and reposition it underneath… round about here.
In the Layout section, change the setting of our Overflow content within the container to Hide.
Next we’ll add the titles again, changing the font size and color like we did with the background. We’ll also add some smaller text underneath for each team member’s title.
Stack both text boxes and send to back.
Like before, we’ll replace the images and text for each item.
Okay, we have all our crew in place. Now we’ll add some effects starting with an Entrance animation.
I’ll choose the Slide effect.
Set its direction to From right and give it a duration of 2 seconds.
Now we’ll add a Hover animation to our container.
I'm going to go custom with this one.
We’ll change it to Initial State and update its opacity to 0 percent. Click Done.
Okay, let’s add a Mouse effect to the color profile image.
Choose Track 3D.
Now set the Angle to 10 degrees, Distance to 30 pixels, Velocity to 0.6 and Perspective to 10.
Another animation now and we’ll apply an Entrance effect to the team member’s name.
Choose Reveal.
And adjust its Delay to 1.5 seconds.
Now we’ll go back to the silhouetted images and apply an Entrance animation.
We’ll select Blur.
And set its duration to 1.5 seconds.
Finally we’ll add a Loop animation to both small strips.
Select Cross.
And Set direction to From top.
Okay, time to take a look at our final design. Let’s hit Preview. We see our silhouetted team slide into view and then when we hover our team member comes into view and our small strip comes alive. A really dynamic way to introduce your team.
That’s all for now. For more tutorials like this and to discover what you can do with Wix Studio, check out our Academy.
.png)
