Agency Website: Build and Animate a Team Page

In this tutorial, we'll build a longer section together that you can integrate into your team page. The images of the employees are displayed all over the page and are gradually animated. The special thing is that we work with a “scroll into view” animation and only use the pre-made animation types from Webflow. This makes it pretty easy to animate any element on a website. For the complete responsive structure, feel free to take a look at the free cloneable in my Webflow showcases.

Create an impressive team section with effects

In this tutorial, I'll show you how to create an appealing team section. We place this section either at the top as an intro or in the middle of the website. We use an interesting effect: The text is pushed out behind a div and the images are elegantly enlarged. When scrolling, the elements are gently scaled back to their position. And the best thing is that we do it all with native Webflow interactions without having to create a custom interaction.

To achieve the effect of the upward text, we use the pre-defined Webflow interactions. This keeps our interaction bar clear and tidy. You can find the entire project in the video description and duplicate it in your Webflow dashboard for free. So you can use it for your own website or take a closer look at how certain things were implemented.

To start, I'll integrate some text and place the team intro frame around it. We give it a height of 100 VH (viewport height) so that it fills the entire screen on mobile devices. In addition, we may increase the height to move the text up a bit.
To arrange team members, let's create a piece of content and use Flexbox to create two columns. This pushes team members outwards. Each column should have a maximum width of 50 percent.
Now let's add team members. Let's create a team member div and add an image. Each member is placed in their own div so we can style them individually. We give the team members a relative position and define a fixed width of around 10em. The images are given a width and height of 100 percent to fill the entire area.

To get the round effect, let's add a box shadow. Here we can play with the values to achieve the desired effect.

Now it's time to add animations. We're using Webflow's predefined CSS animations. To do this, we'll create a class called Grow Animation and apply it to team members. This class triggers the animation when scrolling into the visible area. We can select various animation effects, such as “Flip,” “Bounce,” or “Jiggle.” This makes team members lively and interactive.

To animate the texts in the team section, we create a separate div container for each line. We hide the text first and then use the “slide” animation to show it in. Each line receives its own animation with a slight delay to play the effect gradually.

It is important to note that when using animations in Webflow, attention must be paid to the responsive presentation. Some animations may behave differently on different screen sizes. Therefore, it is advisable to thoroughly test the animations and ensure that they work optimally on all devices.