Flip page with the hole in it

Questions
1

Hi guys!

Got the beauty below to implement :slight_smile:
So, the “flip page” effect… but the page:

  1. has a hole to look through
  2. has a lot of stuff put on it, like text/images, that also have to be visible through the hole when it flies above.

Spent bunch of time looking for a way to cheat with things like Lottie, GSAP, and designer bribing :slight_smile: (to not do this in general), but it seems that it’s a real 3d-related task.

I thought about dumping the page content to canvas and using it as a plane texture. But then smooth bending has to take place. Should it be a bunch of polygons on that plane or some other tools/API to smooth the curves as bezier curves does in a flat world? And the hole… And the tool that bends or, maybe “winds” that plane on itself.
Please, leave a note on how this can/should be done, with the keywords/links to dig.

If I’ve missed something, if you have any thoughts/hints - please, do!
Hairs have started to grey already with this challenge, even if I’m still in my twenties…

2

Try this http://jsfiddle.net/Dragon3DGraff/5r4kwcda/ using http://www.turnjs.com/

1 Like
3

Does anyone have issues when loading external libs through jsfiddle’s Resources feature?
They always fail for me because looks like they don’t use https for loading the resources.

The error I see in the logs:

Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure script 'http://www.turnjs.com/lib/turn.min.js'. This request has been blocked; the content must be served over HTTPS.
4

@Dragon3DGraff, Thank you!

5

Всегда рад :smile:

1 Like
6

How can I create this type of page having hole in the center