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!