Add Classes

Example 5: Interactions (Timeline)

We apply our classes linked with Webflow Interactions to apply a different Interaction on every other item in our Collection List. Each timeline item will fade in from the side it's on.

See Finsweet
Walkthrough

What we will cover

The structure of our CMS Collection List
Establishing all of the add-on classes on a static structure
Setting up our array (list) to hold all of the class pairings. In this How To our add-on classes apply different Interactions to every other item
The .addclasses() component to add unique classes inside the Collection List
An explanation of start and frequency

2019

Project 1

Branding, Web Design

2020

Project 2

Branding

2017

Project 3

Web Design

2018

Project 4

Development

2018

Project 5

Development

2018

Project 6

Motion Graphics

2019

Project 7

Branding

2020

Project 8

Web Design

2020

Project 9

Web Design, Development

2020

Project 10

Web Design, Development

2019

Project 11

Strategy Consulting

2017

Project 12

Web Design, Development

2019

Title

The rich text element allows you stuff.

‍

2019

Title

The rich text element allows you stuff.

‍

2019

Title

The rich text element allows you stuff.

‍

2019

Title

The rich text element allows you stuff.

‍

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.