Forum Discussion
FLIP BOOK / ROLL PAGE ANIMATION / TRANSITION
⚠️ Hi evreybody, big challenge today ⚠️
I am currently creating a course in the shape of a magazine. I would like to add a Javascript code in my storyline file in order to recreate the roll / flip page transition you can find in Powerpoint. Any ideas if it's possible and how can I manage to do that ?
>> it's not for a PDF in a webobject, I would like to be able to flip all slides of the course (intro, content, quiz, result page etc...) exactly like powerpoint does. So the code has to be build for the slide and not for a webobject.
Let me know, have a nice day ☀️
For anyone interested, I assembled a proof of concept example for a pageturn effect in SL using the BookBlocks JavaScript library.
https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/
This is functional, but still in the Beta stage. It could use some refinement and additional error checkng before going into production. The Codrops page shows several additional variations that are possible. I just implemented a basic version.
This is capable of handling simple content, such as is presented in the attached example SL project file, with the demo below.
https://360.articulate.com/review/content/f4db31b9-ec92-4ae0-8fe8-1929fa04006e/review
It can also handle much more complicated interactive content, including audio, video, animations, and custom JS components. A quick mock-up is shown below with some content I excerpted from another project.
https://360.articulate.com/review/content/d1920505-10e8-407f-bb8b-1276a5284330/review
The BookBlocks library relies on several other .css and Javascript files, including jQuery, which all get loaded in the main script. This process could be streamlined.
To make future page content available in SL, I built the book content from a specified collection of slide layers. This allows you to still use the base slide and master slide as a background, master slide layers as overlays, and additional slide layers (beyond those used for the book content) as overlays as well, if so desired.
Feel free to make improvements and share you progress with others.
Edit: Still can't attach zip files, so use these links for extra files.
Nice work Nathan
As said the Morph transition in the Beta gives a look-a-like effect to a pageFlip or pageTurn.
As you can see here.
When time permits im gonna continue this experiment to make it look more like a pageFlip/Turn.https://360.articulate.com/review/content/53e64ddc-cf71-441b-8fad-6e88474d08d8/review
So i gave it a first attempt in making a Flipbook-look-alike.
https://360.articulate.com/review/content/0ed74bed-69bf-4917-b5de-a63a3b8dc846/review
Biggest issue is that Storyline has no clue whats on next pages. So you do have to have the next ( and previous ) page available on a page to create a custom effect like a page flip/ page turn effect.
The sample is far from ready... the turn effect is not perfect and a lot of more work involved to get this to something usable. But as you can see it works.
If enough interest in something like this by fellow users/developers im gonna spend some more time in it to share a completed version. Possible the BETA versions with WAAPI and Morph transition upcoming have some options to make something like this. Will share this in the BETA groups too.If you did use a JS library to produce a page turn/curl effect on the current slide, then there is a possible workaround for SL's lack of knowledge of upcoming/previous content. If you build out your flippable book as a set of slide layers on one slide (instead of a collection of different slides), then you can have the layers preload which makes all of the previous and upcoming content available at once. I experimented with this once when testing a horizontal scrolling environment. By using layers, I could freely flow between the different content sets. It seems reasonable that you could combine a page turn/curl effect with two sets of content to produce the effect you are seeking.
I do think the upcoming Morph transition will give a quite similar effect as a page turn when used on groups in a page.
There are quite some javascript libraries to achieve this effect. GSAP probably has a version of it.
Hi. I notice you never did get a reply to this question. Did you ever find a way to do this? I am also looking to replicate the magazine flipping page effect for each slide.
This library seems promising.
https://github.com/terrilldent/flip.js?files=1
