Create a Flip Book from a PDF in Webflow

Design help Animations & Interactions
1

Hi Guys,

I know this has been asked before, and I’ve searched through the posts, but I can’t find a definitive answer.

I have a client who wants me to build out a design they have put together. One part of the design is to place a PDF on a product page, and allow viewers to flip through the pages.

I’m struggling to work out the best way to create this within a Webflow page, and I’m hoping someone has created one and can shed some light on it for me?

Many thanks in advance for any help.

Here is my public share link: LINK
(how to access public share link)

2

Hi @CharlieW,

I have actually thought about doing this before as well. Here are a couple things to consider.

  1. Is the PDF multiple page document?
  2. If it is, there is no way to create interactions for this purpose!
  3. why not just use an embeddable code snip-it through a 3rd party for just this case?

If it is multiple document PDF, you could create a CMS collection where you have all pages of the PDF document as individual CMS items, use the pagination feature and then change the viewable down to 1 to create a single page flip/look book.

So you have a couple ways of doing it. Please let me know if you need anything else,
Brandon

3

Hi Brandon,

Thanks for getting back.

The PDF would be a multiple page PDF - about 8 - 12 pages. Any ideas where I could get , and how I actually install the code snippets from a 3rd party? Not sure about how to do it.

Many thanks,

4

For PDF flip charts, you could use a third party software such as flipsnack.com.

Webflow doesn’t enable animations on PDF documents, you are only able to upload them to the assets panel or in a CMS field.

5

@JSW is correct.

Here is another option for you as well: https://www.paperturn.com/

Just do a search on Google for PDF Flip Book. Numerous will come up. Just choose the easiest and most cost effective for you and your client.

1 Like
6

Thanks chaps,

I’ll take a look.

Hopefully this won’t be too hard for me to integrate into Webflow

1 Like
7

Hi JSW,

I’ve just set up a trial for Flipsnack. Any ideas where the iframe code should be pasted?

The product details are stored in a CMS, so I’m wondering if I can link the URL in there and get it to display onpage?

8

You won’t be able to get it to display on page based on CMS. You could add a URL field in the CMS and have a ‘view brochure’ button that links to the flipsnack link.

The only way to embed the HTML and therefore display the actual PDF on-page is to do it using a custom code block. This block cannot be changed based on CMS properties.

9

Damn - thats just what I didn’t want to hear…

I’ll have to see if I can talk the client out of this flippy PDF - I hate it anyway.

1 Like
10

Yeah - ideally all the information should be displayed on the web page. Having to load in a remote PDF slows the site and isn’t great for usability.

13

Another good option to create flipbook from PDF is My Flipbook Software.
It automatically convert PDF into Flip Book and then save it on PC or publish online for sharing.