Advanced Continuous Page Transition in Framer

Advanced Continuous Page Transition in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

Advanced Continuous Page Transition in Framer

This is a Framer recreation of the continuous page transition from the IKEA Yearbook website. The cool thing is that each time you click one of the cards, you're actually being taken to a new webpage – you can verify this by checking the URL.

image of Nandi Muzsik

Created by

Interior design cards showing rustic vase and floral pillow
Interior design cards showing rustic vase and floral pillow
Interior design cards showing rustic vase and floral pillow
A man with glasses next to a screen displaying 'Layout Templates' and navigation options

Related Lesson

New in Framer: Layout Templates (Crash Course)

A man with glasses next to a screen displaying 'Layout Templates' and navigation options

Related Lesson

New in Framer: Layout Templates (Crash Course)

A man with glasses next to a screen displaying 'Layout Templates' and navigation options

Related Lesson

New in Framer: Layout Templates (Crash Course)

About the resource

Creating such page transitions in Framer wasn't possible before, but with layout templates (new feature), a whole new world of opportunities has been presented to us. This is possible because all fixed elements within layout templates don't reload when switching between pages, so if these fixed elements are components, their variant switches across different pages can be animated seamlessly.

Keep in mind that this demo is for pushing the boundaries of layout templates, and not the intended use case, but I just wanted to show what you can create if you think a little outside the box.

About the resource

Creating such page transitions in Framer wasn't possible before, but with layout templates (new feature), a whole new world of opportunities has been presented to us. This is possible because all fixed elements within layout templates don't reload when switching between pages, so if these fixed elements are components, their variant switches across different pages can be animated seamlessly.

Keep in mind that this demo is for pushing the boundaries of layout templates, and not the intended use case, but I just wanted to show what you can create if you think a little outside the box.

About the resource

Creating such page transitions in Framer wasn't possible before, but with layout templates (new feature), a whole new world of opportunities has been presented to us. This is possible because all fixed elements within layout templates don't reload when switching between pages, so if these fixed elements are components, their variant switches across different pages can be animated seamlessly.

Keep in mind that this demo is for pushing the boundaries of layout templates, and not the intended use case, but I just wanted to show what you can create if you think a little outside the box.

IKEA website transition showing home nature and fabric sections

The variants of the component used in the layout template as a fix element.

IKEA website transition showing home nature and fabric sections

The variants of the component used in the layout template as a fix element.

IKEA website transition showing home nature and fabric sections

The variants of the component used in the layout template as a fix element.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Showcase platform for artists featuring interactive image gallery and user tags

    Website Hero Intro Animation in Framer

    Animation

    Showcase platform for artists featuring interactive image gallery and user tags

    Website Hero Intro Animation in Framer

    Animation

    Showcase platform for artists featuring interactive image gallery and user tags

    Website Hero Intro Animation in Framer

    Animation

  • Graphic with 'Unlimited Creatives' text surrounded by circular profile photos of diverse individuals on a dark background

    Circular Scroll Animation in Framer

    Animation

    Graphic with 'Unlimited Creatives' text surrounded by circular profile photos of diverse individuals on a dark background

    Circular Scroll Animation in Framer

    Animation

    Graphic with 'Unlimited Creatives' text surrounded by circular profile photos of diverse individuals on a dark background

    Circular Scroll Animation in Framer

    Animation