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

  • Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

    Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

    Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

  • Layered zoom scroll animation with overlapping urban and portrait imagery

    Image Zoom Scrolling in Framer

    Animation

    Layered zoom scroll animation with overlapping urban and portrait imagery

    Image Zoom Scrolling in Framer

    Animation

    Layered zoom scroll animation with overlapping urban and portrait imagery

    Image Zoom Scrolling in Framer

    Animation