Animations

Framer Update: Page Effects (View Transitions)

Benjamin

6:18

42K views

Nov 23, 2023

About this lesson

We’re excited to introduce Page Effects, allowing you to animate between pages. Built on top of the View Transitions API, Framer is the first tool in which you can explore these cutting-edge features visually. You can animate all pages of your site with a single click, or target specific pages to animate between. Plus, you can add custom masking effects like Wipe, Inset, and Blinds, making your sites stand out. Currently Page Effects only work in Chrome (and Edge) versions 116 and beyond. On Safari and Firefox, these will simply default back to instant, so it’s an amazing way to progressively enhance your site on modern browsers. https://www.framer.com/updates/page-effects

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00[Music]0:15yo my name is Benjamin and I'm excited 0:18to introduce Pig effects built on top of 0:22the view transitions API framer is one 0:25of the very first tools allowing you to 0:28design custom animations between pages 0:31so let's Dive Right In Here we are on 0:34the homepage of our demo project and we 0:37now also get an effects panel here here 0:41we can add page effects to all pages or 0:45to a single page this option is unique 0:48to the homepage we realize especially 0:51for larger sites you often want to add 0:53the same transition across all of your 0:56pages so this is our new page effect UI 1:00we can Target a specific page but here 1:03we're animating between all pages we 1:06also have a bunch of Handy presets to 1:09pick from and finally we can design 1:11custom exit animations of the current 1:14page as well as custom enter animations 1:18for whichever page you are navigating to 1:22which for this effect is between any 1:24given page if you've used effects in 1:27framer before these panels should feel 1:30quite familiar to you there's a whole 1:33bunch of properties we could animate and 1:35we can also Define custom transitions 1:39however the defaults of our presets are 1:42really quite nice so I didn't have to 1:44customize anything here all I did was 1:47add the page effect so let's go ahead 1:50and give this a preview if I now 1:53navigate between Pages there's a subtle 1:56Crossfade animation happening instead of 1:59each page appearing instantly they 2:02gently transition into view and you can 2:05combine this with all existing effects 2:07in framer to create something that feels 2:10truly unique So currently all of our 2:13Pages Crossfade thanks to our special 2:16all pages effect that can be applied 2:19from the homepage but what if we wanted 2:22to add something unique like a custom 2:24transition when opening a blog post so 2:28I'll select the blog index page and add 2:31a new page effect and we want to Target 2:34the blog pages from our CMS so let's 2:38find it in here so this will Target all 2:41blog Pages let's also use a different 2:44preset I'll use wipe 2:48left as you can see that preset also 2:51only affects the incoming page and let's 2:55customize this effect by taking a look 2:57at the mask property this is a unique 3:01control that we designed specifically 3:03for page effects and it includes a bunch 3:06of custom masking options that you can 3:09use within your page effects giving you 3:11even more creative control and all of 3:14these masks can be customized 3:16individually as well for this one let's 3:19decrease the width of the wipe gradient 3:23and this preset uses a time of 0.4 3:27seconds by default which is fine for now 3:29now and next let's go to the blog Pages 3:33here I'll add another page effect I'll 3:36point it back to the blog index page 3:39I'll use the wipe right preset which 3:42really just sets the angle to 0° here 3:45and I'll also set the width to 20% just 3:49like we did in the other one so let's 3:52take a look at what we have opening any 3:56posts gives us this cool wipe effect 3:59from the right and going back to the 4:02blog does the inverse and as you can see 4:05this works for any one of our blog posts 4:09and switching back to the homepage would 4:12still give us a cross 4:15fade and the same is true when going 4:18from home back to the blog so let's 4:22recap how this works on the blog page we 4:26have a page effect that points to the 4:29blog Pages these are set to wipe left 4:33through a custom mask 4:36transition and from the blog 4:40Pages we have a page effect that points 4:43to the 4:46blog with a mask that wipes to the right 4:51then on the homepage we've set for 4:54anything else so going from blog to home 4:57for example or from docks to updates to 5:01a simple cross fade and there are many 5:04more effects for you to play with like 5:07circular 5:09[Music]5:13masking 5:16[Music]5:21blinds GIC 5:28masking and inset and all of these are 5:32completely customizable the 5:35possibilities here are endless and we're 5:38super excited to give you full control 5:41at the time of recording these features 5:45have been available in Chrome and EDH 5:48for a bit but not yet in Safari or 5:51Firefox there these effects will simply 5:55fall back to being instant so nothing 5:58will look broken and you can consider it 6:01a progressive 6:02enhancement that's it for this video 6:05thank you so much for watching and stay 6:08tuned for more updates coming 6:16soon

TeachesPage Transitions

Also coversTransitions & Easing

Watch on YouTube ↗

‹ Framer Update: Asset Search

Framer Update: Component Effects ›