Interactions: Need help wih page transitions

Design help Animations & Interactions
1

Hi,

Im having trouble with getting the right page transitions.

I followed the exact steps that was given in this tutorial:

But still won’t work on the mobile version of my site.

When the page loads:

  1. shows page loaded with all content.
  2. “curtain” screen goes up.
  3. “curtain” screen goes down.

Whereas what I want to achieve is:

  1. “curtain” screen loads first and covers the content
  2. content loads.
  3. “curtain” screen goes down.

Any thoughts on why this might be happening?

Here is my public share link: LINK
(how to access public share link)

2

my public link:
https://preview.webflow.com/preview/chris-widjaja-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=chris-widjaja-portfolio&preview=19b2b6821a9030f54d636bb36334f28a&pageId=5f243dc2e24df922e9a84e62&mode=preview

3

I like it, it looks like you have the cover fixed.

For some polish, transition - Project Load in - Join the BG Overlay and Block Right together, no need to change timings.

I see your using gifs, consider changing to image and loop transactions. You would be able to get a much nicer display. Like delays fade out after on screen so long.