Turn.js for Portfolios

Why Turn.js fits a portfolio build

Creative portfolios reward pixel fidelity over feature breadth. The audience is short-attention-span casting agents, art buyers, and creative directors who are evaluating you against fifty other portfolios that day. Turn.js gives you a chrome-free reading mode that lets the work speak; everything else is a distraction you should cut.

Turn.js sits at 7,475 GitHub stars, ships under the NOASSERTION license, and is written primarily in JavaScript. Chrome 16+, Firefox 10+, Safari 5+, Edge, IE10+ (with shims). Mobile Safari/Android Chrome supported via touch shim. If your portfolio audience falls inside that support window, you can move on to implementation; if it does not, jump down to the alternatives section before writing any code. our editorial picks for Portfolios are updated on every re-seed.

The right setup for a portfolio

Install Turn.js with the same command as a generic build, the use-case differentiation lives in the surrounding markup, the loading strategy, and the analytics, not in the install:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="turn.min.js"></script>

The minimum-viable initialisation is intentionally close to the library’s minimum working example so you can see a page-turn working before customising:

<div id="magazine">
  <div class="page"><img src="page-1.jpg"></div>
  <div class="page"><img src="page-2.jpg"></div>
  <div class="page"><img src="page-3.jpg"></div>
  <div class="page"><img src="page-4.jpg"></div>
</div>

<script>
$('#magazine').turn({
  width: 800,
  height: 600,
  autoCenter: true,
  display: 'double',
  acceleration: true,
  gradients: true,
  elevation: 50,
  when: {
    turning: function(e, page) {
      console.log('Turning to page', page);
    }
  }
});
</script>

What matters specifically for a portfolio

The right portfolio flipbook is minimal: cover, work, contact. Skip the table-of-contents, skip the ‘about’ intro page, and let the first spread be a full-bleed hero image. Turn.js handles full-bleed imagery cleanly because its rendering model accepts arbitrary page content; you are not constrained to a template.

Optimise relentlessly for image quality. Export each portfolio piece at the highest resolution your audience’s screens can display, and use modern image formats (AVIF or WebP) so the file sizes stay manageable. A portfolio that takes ten seconds to load on a casting agent’s 5G phone is a portfolio that does not get reviewed.

The mistake to avoid

Most portfolio builds add too much chrome: navigation arrows, page numbers, share buttons, dark-mode toggles. Cut all of it. The fewer UI elements compete with your work, the better the work looks. further reading on this pattern covers the recovery playbook in detail.

Alternative libraries for a portfolio

If Turn.js turns out to be the wrong fit, the libraries below are the next-best open-source picks for the same use case, sorted by GitHub star count. Each one has a deep-dive page with feature matrix, browser support, and code samples.

What to read next

• The full Turn.js deep-dive, feature matrix, browser support, and head-to-head verdicts.
• All indexed Portfolios tools, including hosted-SaaS options, not just open-source.
• Buyer guides, opinionated, use-case-first stack picks.
• Embedding tutorials, framework-specific recipes for React, Vue, Svelte, Next.js, WordPress, and Shopify.