I would like to create a Hero area with a theatre-style curtain, and when you scroll down, the curtain opens to reveal an image in the centre. I have tried using animations, but I can’t get it to work. I would appreciate your advice and tips if this is possible in Blocks.
Thank you.
Have you considered Tumlt Hype?
Thx for your feedback-
A few years ago I made something similar, but with video.
+1 Hype is a good choice, but for simpler things it might not be necessary, depending on the effect you want to achieve.
I made this some years ago.
MEDUSA You can open and close curtains with the mouse.
Maybe you can create a hype-crafted container with a trigger that opens the curtains on scrolling?
Thinking about it, it’s possible to do this with Blocs. ![]()
Structure: It fit to the screen and isn’t clickable (pointer-events-none)
Animation: Unfortunately I couldn’t use the native animation because it starts in fade at 0 and I made some custom code. In the widget, you’ll find some CSS, and at the top you can change the speed and delay.
–curtain-duration: 1.7s; animation speed
–curtain-delay: 1.9s; delay before opening
Images: The curtain style changes in size; it’s denser on the phone and less so on the desktop.
I also added a central text that splits.
BTW. make it invisibile in preview ![]()
![]()
What’s missing:
The JS cookie file to decide to show it only once….
hope this helps
Whaou !! Thx a lot, I will try this, but the link to download the project doesn’t work or ?
Hello, and thx for sharing, it’s close to what I would like to reach in term of effect. May I ask you how you made this effect, in using which tool ? Thx
Hi! If I remember correctly, I used free footage with an alpha channel and edited it in Final Cut Pro.
I made a zip file, please try again ![]()
No it doesn’t work, if I click on the link to download, I get a White page to multithemes.com
Sorry for the inconvenience
I made a zip of the project file theater_curtain.zip, can you download this?
I get the file, it didn’t worked on my iPad but on my Mac Pro, yes, thx again I will take a look.
Sorry, I’ll see how I can solve the problem
Has anyone had the same problem?
thanks
Sorry I mean it was not possible to download it from my iPad. But of course I can use it on Blocs iPad or on Mac OS ![]()
No problem
, I hope the template is useful.
I’ve never tried downloading from iPad, good to know.
