Concept recreation in webflow

Design help Layout & Design
1

The landing page has a list of movies and interacting with it gives more info about the movie. The url changes, but the site doesn’t reload. It’s the same when about is clicked.
How to execute this in Webflow?

2

hi @Gurukoushik_R this is very simple.

Simplified concept:

  1. fixed element that will hold all thumbnails (images and short preview videos)
  2. images and short videos positioned absolute (stack on top of each other) with first item set opacity: 1 and rest opacity:0
  3. navigation hover or mouseover changes opacity: 1 to current image rest to zero
  4. click on link go to page (there is some animation like fading out navigation and page transition on load like scale from 1.2 to 1 etc )

done

3

this addresses the image/video transition when hovering the movie title list. What I want to deciphered is the next step. Click on the movie title to show more info, this happens in the same page thought the url changes to the targeted movie page. How can this be implemented using webflow, where I would be using cms for the movie list.
Ideally I want is the cms list displayed, clicking in would open the cms collection page seamlessly in the same page.

4

No it does not. Click on link will redirect to new page as I have described, In “WF terms” it redirect to “Template” page

5

it does redirect to a new page. but feels seamless, as there no visible loading action in the browser tab.

6

also the how do i connect the fixed element thumbnails to get these information from the cms collection

7

as I have mentioned there is page transition animation on load !

I do not understand what do you mean. Besides page transition all should be clear. The container for images is fixed and images are in absolute position. After page transition are all data on detail template page

Open website in DevTools and study how it is structured as I have done.

1 Like