Flip page with the hole in it

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…

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

1 Like

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.

@Dragon3DGraff, Thank you!

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

1 Like