Is there a way to create this with webflow interactions?

Design help Animations & Interactions
1

I am trying to re-create one of the landing pages our front end developer made recently using webflow. The part i am struggling with at the moment is at the bottom where pressing one text reveals an image on the left, replacing an existing one and at the same time lowers the opacity of the other texts.

Here is a link to the page Collaborate without meetings - Geekbot

And this is the section i am describing above.

image
image2166×1152 324 KB

I am fairly new to webflow and also a visual designer, so i don’t have a very extended understanding of writing code.

2

Yes, this is very possible and there are a few ways to do it.

Personally, I would recommend you use the Tabs element where you customize the tabs to stack vertically on the right side. Fill the tabs with the header and text elements you want and set the non-selected tab to lowered opacity. I believe can toy with the transitions in tab settings to accomplish that “upward rise” look of the tab contents (pane at left), or at least something similar. You might not need interactions at all to pull this off.

If you need more help, I can get into more specifics. Let me know. Welcome to the forums.

3

Thank you @ctrav i will give it a go and let you know if it worked out.