Forum Discussion

ornellaLR's avatar
ornellaLR
Community Member
10 months ago

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 ☀️

21 Replies

  • 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.

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member

      This library seems promising.

      https://github.com/terrilldent/flip.js?files=1

  • There are quite some javascript libraries to achieve this effect. GSAP probably has a version of it.

  • 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.

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member

      I do think the upcoming Morph transition will give a quite similar effect as a page turn when used on groups in a page.

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member

      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.

    • CajaPopularM704's avatar
      CajaPopularM704
      Community Member

      Do you still have the code for this Morph transition? I could use it on my Storyline. Thanks if you do have it and can share it.

  • 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.

    https://paedagogus.org/bb/css.zip

    https://paedagogus.org/bb/js.zip

  • AmyGtt's avatar
    AmyGtt
    Community Member

    Can you tell me how to add more pages to the flipbook?

    😁NM, I figured it out. I am so proud of myself!😁 This is really awesome. I can see it being very useful in many lessons.

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member

      Keep in mind that this is a rough example demonstrating the functionality. Using it as is will be a bit clunky.

      Anyway, to add more pages follow these steps.

      1. Create additional layers at the top of the layer list, or copy or duplicate one of the existing layers.
        1. Add whatever content you need to the layer, matching the format of the existing layers
      2. Increase the countLayers variable value to equal the number of layers used (2 facing pages per layer)
      3. Add additional togLayer_# variables to match the number of layers used. Set to false.
      4. On the slide base, add additional triggers for each added layer matching the format of this one
      5. Make sure the existing Execute JavaScript trigger is at the bottom of this list
      6. On the slide base, add additional triggers for each added layer matching the format of this one
      7. On each new layer that you add, insert the following trigger (copy and paste from another layer's trigger list)
      8. Move this trigger (currently on layer 4) to the bottom of the topmost layer, or the last one in the trigger list you created in step 3 above)
      9. Set all of the layers you are using as book pages to match these layer properties settings (for each layer, select the gear on the bottom right below the list of layers)
        1.  

      When you publish the project, you should be able to flip through your added pages. Hopefully, I did not forget any steps.

      I attached an updated file with some added pages.

      For practice, try making a copy of the original project file and then going through the steps to add pages so it looks like the new one. If you have problems, compare your project to this one. Once you can recreate this, then you should be able to add however many pages you need.

      p.s.- I removed a few unused variables from the new file that were left over from earlier versions.

      • AmyGtt's avatar
        AmyGtt
        Community Member

        It's working beautifully. I am now confused on how to move the book to the side of the screen. 

        So, here's what I am using it for: I am putting a highly technical document onto each page. The user will then answer a question by clicking through the document to locate the answer. 

        I need room to put the question on the main slide, not on the flipbook. I will then hide the question and show a new question once the correct answer has been located in the document. I just need room to put the question.