Jump to content
GreenSock

rlima

PageFlip

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello guys,

 

i need to do one pageflip like this one:

 


 

and i want to use greensock js to make it work in moz, ie, chrome...

what's the best way to do this? using transforms, rotation, skew, box shadow?

 

Jack, Carl, can you help me? any example..

 

Thanks,

Ricardo
Link to comment
Share on other sites

Hi Riccardo, and welcome to the GreenSock forums.

 

To achieve an accurate page-flip and curl effect requires quite a bit more than just the methods of the GSAP API. There are 3 types of page flips that I'm familiar with:

 

1: hard flip: just a div rotating around the y axis 

See the Pen 38204e7a0163c5f7c32749a380f5acb0 by GreenSock (@GreenSock) on CodePen

This is fairly straight-forward to achieve a number of ways "out of the box" with just GSAP.

 

2: automated page curl: You get the page curling effect but you don't actually drag the page by the corner and get to play with it. The animation happens automatically  using pre-defined parameters. This pure css3 example does a great job of illustrating though the types of transformations that need to take place: http://romancortes.com/ficheros/page-flip.html

 

3: fully-interactive page curl: You can drag the corner in many directions and all angles and offsets react in real-time to your motion. See your example. Some allow you to "throw" the corner and it will complete the turn with some attempt at simulating real physics. The example you provided kind of lacks in this department.

 

Unfortunately I haven't dabbled in methods 2 and 3 or tried yet to convert existing demos to GSAP. I would start by googling "javascript page curl tutorial demo" or "javascript page flip demo" and I'm sure you will find a number of samples to investigate. 

 

You're going to find that the css and javascript used just to structure your elements on the page is going fall into the "quite complex" category even before you start worrying about the interactivity or animation. Computing the necessary angles, offsets and targeting the proper elements is no small feat either. Admittedly something beyond my comfort zone.

 

I would recommend finding a tutorial that uses a javascript approach that simply allows you to click a button to turn a page and then try to substitute a GreenSock tween to handle the animation. 

 

I don't know your level of expertise as a coder, but if you are more of a beginner and you need this effect for an immediate project, I would strongly recommend researching and purchasing a file like this: http://codecanyon.net/item/responsive-flip-book-powered-by-jquery/1724917

 

At the very least you will have a solid working example to explore and learn from.

 

Unfortunately, building a decent page curl effect from scratch is a non-trivial affair and we have to stay focussed on the core GSAP API when handling support concerns. 

 

Let us know if you make any progress or need any specific help along the way. If its something we can tackle, we'll do our best.

 

-Carl

  • Like 4
Link to comment
Share on other sites

  • 1 month later...
  • 4 months later...

Hi Riccardo, and welcome to the GreenSock forums.

 

To achieve an accurate page-flip and curl effect requires quite a bit more than just the methods of the GSAP API. There are 3 types of page flips that I'm familiar with:

 

1: hard flip: just a div rotating around the y axis 

See the Pen 38204e7a0163c5f7c32749a380f5acb0 by GreenSock (@GreenSock) on CodePen

This is fairly straight-forward to achieve a number of ways "out of the box" with just GSAP.

 

2: automated page curl: You get the page curling effect but you don't actually drag the page by the corner and get to play with it. The animation happens automatically  using pre-defined parameters. This pure css3 example does a great job of illustrating though the types of transformations that need to take place: http://romancortes.com/ficheros/page-flip.html

 

3: fully-interactive page curl: You can drag the corner in many directions and all angles and offsets react in real-time to your motion. See your example. Some allow you to "throw" the corner and it will complete the turn with some attempt at simulating real physics. The example you provided kind of lacks in this department.

 

Unfortunately I haven't dabbled in methods 2 and 3 or tried yet to convert existing demos to GSAP. I would start by googling "javascript page curl tutorial demo" or "javascript page flip demo" and I'm sure you will find a number of samples to investigate. 

 

You're going to find that the css and javascript used just to structure your elements on the page is going fall into the "quite complex" category even before you start worrying about the interactivity or animation. Computing the necessary angles, offsets and targeting the proper elements is no small feat either. Admittedly something beyond my comfort zone.

 

I would recommend finding a tutorial that uses a javascript approach that simply allows you to click a button to turn a page and then try to substitute a GreenSock tween to handle the animation. 

 

I don't know your level of expertise as a coder, but if you are more of a beginner and you need this effect for an immediate project, I would strongly recommend researching and purchasing a file like this: http://codecanyon.net/item/responsive-flip-book-powered-by-jquery/1724917

 

At the very least you will have a solid working example to explore and learn from.

 

Unfortunately, building a decent page curl effect from scratch is a non-trivial affair and we have to stay focussed on the core GSAP API when handling support concerns. 

 

Let us know if you make any progress or need any specific help along the way. If its something we can tackle, we'll do our best.

 

-Carl

Hi Carl,

 

Can you please help me out reversing the animation of this (

See the Pen 38204e7a0163c5f7c32749a380f5acb0 by GreenSock (@GreenSock) on CodePen

) from LEFT to RIGHT?

 

Also, is there a way using Greensock to have an automated page girl without user interaction as you have already explain on your point number 2, rather than using css (doesn't work in IE).

 

Many thanks!

 

Kindest,

-Lan

Link to comment
Share on other sites

Can you please help me out reversing the animation of this (http://codepen.io/Gr...32749a380f5acb0) from LEFT to RIGHT?

 

 

here is the animation going from left to right.

 

Also, is there a way using Greensock to have an automated page girl without user interaction as you have already explain on your point number 2, rather than using css (doesn't work in IE).

 

 

Having the animation automated isn't really related to the fact that certain IE browsers don't support 3D css settings properly or at all. For the type of effect in the codepen, GSAP relies on css features that some browsers don't support. For those browsers you could create an alternate script that simply fades or moves the pages into view. 

Link to comment
Share on other sites

here is the animation going from left to right.

 

 

Having the animation automated isn't really related to the fact that certain IE browsers don't support 3D css settings properly or at all. For the type of effect in the codepen, GSAP relies on css features that some browsers don't support. For those browsers you could create an alternate script that simply fades or moves the pages into view. 

 

Hi Carl,

 

Where is the animation going from left to right?

 

Here's my code which goes from right to left.

 

var tl = new TimelineMax();

tl.to("#left", duration, {rotationY:-180, transformOrigin:"0% 0%", ease:Linear.easeNone}).set("#left .front", {autoAlpha:0}, "-=1.5");

 

Uncertain how to reverse it to go from left to right. Please help.

 

And thank you so much for your reply.

 

Kindest,

Lan

Link to comment
Share on other sites

oops, it looks like i forgot a link:

See the Pen 47ce270378c85be2db4ca024474a7c7e by GreenSock (@GreenSock) on CodePen

 

Hmmm... I thought I've tried updating only the transformOrigin but somehow getting the same result going from right to left. Thank you very much.

 

Much appreciated as usual. Have a great evening.

Link to comment
Share on other sites

oops, it looks like i forgot a link:

See the Pen 47ce270378c85be2db4ca024474a7c7e by GreenSock (@GreenSock) on CodePen

Hi Carl,

 

These really baffle me. I have tried this url (

See the Pen 47ce270378c85be2db4ca024474a7c7e by GreenSock (@GreenSock) on CodePen

) in IE10, 9, 8, 7... and works wonderfully.

 

But when I've retrieve the code as a zip file, unzipped it and put this on the server (http://arlanv.com/temp/cardflip/) and it seems to be only working in IE10. How weird is that.

 

Is there anything I am missing? Please help.

 

Kindest.

Link to comment
Share on other sites

Hi Carl,

 

These really baffle me. I have tried this url (

See the Pen 47ce270378c85be2db4ca024474a7c7e by GreenSock (@GreenSock) on CodePen

) in IE10, 9, 8, 7... and works wonderfully.

 

But when I've retrieve the code as a zip file, unzipped it and put this on the server (http://arlanv.com/temp/cardflip/) and it seems to be only working in IE10. How weird is that.

 

Is there anything I am missing? Please help.

 

Kindest.

Hi Carl,

 

Do you have any thoughts on the above quote, please.

 

Many thanks!

 

Kindest,

Lan

Link to comment
Share on other sites

No, I am not using Chrome Frame in IE. I am actually using this (http://cord.sourceforge.net/) with IE developer tools but doesn't explain your URL "codepen" works from IE7 to IE10. I've tried deleting my cache even cookies so many times and still getting the same results.

 

Very strange indeed. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×