How to make a age flip with animations

Design help Custom code
1

I am brand new to the site and web design but I want to start somewhere so forgive me if this is the wrong forum.
For my animation portfolio website, I want to make a full-page flip (not a small book-like flip like Turn.js.) on scroll (or swipe for mobile) without any of the fancy physics like in Turn.js. I also would like to have it in landscape mode to look like animation paper being flipped through.
This may be over the top for a beginner, but if there is a way or a plug-in that can make it look like light is shining through the paper that actively changes depending on the frame of which it’s flipped that would be very much appreciated.

any help at all from the flip itself, making look like it has a paper texture, the light physics, and making it horizontal would be much appreciated.
If it helps, I can also 3D model if it’s a thing, and use 3D modeled assets to do some of the work.

2

Since you’re just starting with web design, I recommend starting with the CSS + JavaScript approach first. It’s simpler and doesn’t require external tools or libraries. Once you’re comfortable, you could explore three.js or other 3D solutions to add more complex lighting and animation. Feel free to ask for more details on any specific part, and I’ll be happy to guide you further

1 Like