Demos

Live examples of Pagefold with GSAP, the Overlap plugin and its other tools. Each one is a real page, with its code underneath.

Each demo is a small site that runs inside the page, with the code that makes it work under it. Click around, use the back button, and then read how it is done.

• GSAP transition A timeline for leaving and another for arriving, and a second animation chosen by a link. JSGSAP
• GSAP and ScrollTrigger Scroll animations that are killed with their page. A counter proves nothing is left behind. mountScrollTrigger
• Overlap with GSAP A portfolio: the next page opens as a circle from your click, titles rise word by word and the bar moves too. OverlapGSAP
• Animations by route The transition depends on where you come from and where you go. Only CSS. Route name
• Preloading, measured Hover a link and the page is ready. A log shows the cache and the network. Preloadcache
• Components that clean up Counters, timers and tabs, set up and cleaned up with their page. mount
• What the plugins change The title, the language, the body class, the announcement and the focus, live. HeadBody classA11y

About the demos

• They are plain HTML files, with no build step. The code under each one is the code that runs.
• The GSAP demos load GSAP from a CDN. Pagefold does not include GSAP: install it yourself and check its license.
• You can open each demo in its own tab, or read its files on GitHub, with the links above it.
• The themes, Overlap, Fragment and View Transitions pages have a demo of their own.