Streaming live at 10am (PST)

Swap content with links - what is the best solution in WebFlow?

Hi guys!

Im currently building a website for a travel guide business called “Jyllandguiden”. Below you can see an image of what the front page looks like above the fold.

In the bottom left there are some region names that I is going to be clickable, when you click on one of these four text links I want the content to change based on the link they click: The image on the right, the main text on the left, and the map one the bottom right are all going to be swapped out through interactions and animation. Below you can see what the content would look like if you press the “Vestjylland” textlink:

(There will of course be sexy looking transitions when the content is getting swapped, currently active content will be animated out, and new content will be animated in.)

My questions is, what would be the best way to achieve this effect? The challenge is that its non-linear, compared to a slider for example. Animating out the standard content on the first click is no problem, the challenge is to animate out the current content on second, third, fourth, etc clicks. How could I achieve this effect? Is it for example possible to animate content out then animate in new content with tabs? What would you recommend me to do?

Hopefully you guys understand my question, if not then I will try to explain it in more detail. Thanks guys!

So Ive worked a little bit with this design in Webflow to show you what effect I would like:
https://jyllandguiden-no-f7f57c7afac669130f5827.webflow.io/ Try to click on the “Vestjylland”-link to see what I mean, this is the type of transition I would like.

Here is also a preview link for webflow

Very nice work!

I would either use the Tab component and move the Tab menu down to play as a nav.
Or create a page for each slide, and design a custom nav for the region location names, convert it to a symbol and paste the nav to all pages.

Extra tip: with interaction you can highlight the region on the small map when hovering over the name of that region…

1 Like

Thanks so much Eli11!

Tabs or pages for each slide makes sense, I will try with tabs first and try the “delay link script” i order to also get the animate out animation. Thanks again Eli, also for the extra tip!

I ended up trying both solutions, not to sure on which one to go for yet:
Here is the solution with pages: https://jyllandguiden-no-f7f57c7a-84888adb63004.webflow.io/
Here is the solution with tabs: https://jyllandguiden-no-f7f57c7afac669130f5827.webflow.io/

The “pages” version works more as intended by having both “in” and “out” animation for each region-link. (And was the most straightforward to solve). But the animation feels a bit choppy, but still a viable option.

The “tabs” works well and is more fluid in its movement, I have yet to figure out how delay the link/content swap. If I figure this out then this is without a doubt my preferred solution.

But anyways, I am on the right path here - thanks again for the tips Eli11!

1 Like

Well done!
I would choose the Pages solution rather that the Tabs.
You’ll get a unique url for each page, and have the ability to transition out of page (like you did).

On my end the transitions between pages are smooth… only once a while I can see a flicker but it’s ok.

1 Like