Mouse follow interaction on custom 404 page - Build a custom portfolio in Webflow, Day 14

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@person81045]

To anyone after me who is still super new to webflow, you can use the backdrop filter in the effects section of the right panel. Works exactly (actually better) than the custom code (since you don't have to mess with code

[@keennii]

Thank you

[@marl6844]

Really thank you very much for this advice.

[@slipstream01]

Wow thank you. that helped.

[@james1327]

Glorious. Thanks.

[@kimmykochar9167]

Thank you so much!! Ur an angel!!

[@kenyaseemenow]

I can listen to him all day. He makes it fun, and informative.

[@cmdcreativity]

When the 404 error page looks better than a lot of homepages on many sites... 😂

[@hoonkorean]

Finally, I'm leaving my comment on Day 14... Learning video on Webflow is truly the best video I've ever watched to learn something. I love the sense of humor, structure, visual effects, and grium's(I hope I wrote the name correctly) funny moments at the end. Thanks, Webflow team, you guys are helping designers so much!

[@Webflow]

Wow, thanks for the love! ❤️

[@viettuongpham7857]

Omg.. how gorgeous it is... it's like I've discovered magic. I no longer need to beg the developers if they can make it or not. haha Thank you Webflow for making our designer's life much easier!

[@LabyrintofAuthenticity]

Update: we can add backdrop filters in the designer, no need to copy in the code

[@quyenxa3765]

Could you direction me how make this?

[@kenjones]

First, let me just say something. ... Something But expanding on that, this video is amazing!

[@WalterKimaro]

That joke was so on brand👏

[@person81045]

For anyone confused in in Feb 2022, the set up is different. The 404 text is a text block by default on webflow, but here, it is a div block. I converted the text block to a div block with these steps 1. Click on the 404 text block 2. CTRL + K (or equivalent for mac) 3. Type Div block 4. You get two options in drop down, "div block" and "convert to div block" 5. Select "convert to div block" Then you can rename it to "404 Details" for the class

[@entertainmentyoutube3606]

it only says to me convert to link, so its not possible for me to do this

[@kylankincaid2290]

The "It was already there" line killed me at 11:50 lol

[@djjoy1]

I really like the 21-day portfolio tutorials and learning how easy Webflow is for designers to make their own website. The only thing I wasn't able to do is adding custom code with the free version of Webflow. So now I'm missing the cool glass effect on the 404 page.

[@Webflow]

Thanks for writing in, Jevero and wetiot - we're always trying to build more features (like backdrop-filter) into Webflow, so check back later for updates in that area. We've opted to rely on custom code for effects like backdrop-filter since it's not natively supported on Firefox. As soon as Firefox builds in that native support, we'll be able to include an entire suite of options there (even on free plans)! 👍

[@thejaysehansen]

@@Webflow I say don't wait on Firefox! Add that stuff in asap! (who uses Firefox anyway? ;-) So great. Loving all these videos. Excited for your planned updates.

[@ddc171]

@@thejaysehansen dude, I use Firefox

[@markbabcock]

This was really cool. Thanks, Webflow team!

[@jessecreedon8246]

got me good @11:35 lol - these tutorials are fantastic, really enjoying following along.

[@thejaysehansen]

Another mind blowing vid. Didn't expect to love a 404 page tutorial, but, LOVED this one.

[@abbas.25.]

The embed element is unfree 😭😭😭😢😢😢

[@yusion9]

so must upgrade to cms plan then only we can apply the frosted glass using the custom code?

[@oussamajaafar5597]

Thanks youuuu so much webflow team

[@FlavienLacour]

Hi, very good job as always !! One question, is there any reasons you choose to apply the interaction on both images instead of the Div Block itslef 404 Interaction ? Both are working well

[@dhannugamer]

Help me out - getting pop message 👇👇 You'll be able to upload a wide array of file types - including PDFs, Word docs, spreadsheets, and more - when you add hosting to this site or upgrade your account. Note - I'm using free plan.

[@tom_norman]

Hi @webflow, I know I'm a little late to the party, but why does my default 404 look nothing like the one in the video?

[@Webflow]

Hi Tommy! Great question! We have updated our 404 template and it sounds like we need to update it in this video as well. Thank you so much for flagging this! Here are some great 404 pages for inspiration, many of them are clonable as well: webflow.com/websites/popular?c=1#stq=404&stp=1

[@tom_norman]

@@Webflow I figured as much... thanks for the reply and for the awesomeness, mucho appreciado!

[@Exhodius]

Embed not allowed on free versions.

[@Exhodius]

Anyway, use backdrop filters instead (under filters on the right)

[@ntokozosibiya759]

@@Exhodius It actually works thanks🤝

[@CarlaVecino1]

Is there anything done this year?

[@lludu2]

I love this but as I'm going through these tutorials and still trying to decide if I want to fully switch over to webflow it sucks to see that the embed html is only on the paid platforms. While i appreciate it, locking that when its in the portfolio challenge sucks.

[@Webflow]

Hi, Andrew! We're always trying to build more features (like backdrop-filter) into Webflow natively, so check back later for updates in that area. We've opted to rely on custom code for effects like backdrop-filter since it's not natively supported on Firefox. As soon as Firefox builds in that native support, we'll be able to include an entire suite of options there (even on free plans)! 👍

[@Peebals]

Your work Your All Tutorial are too much helpful

[@watchus020]

I'm having a hard time getting my div blocks, containers etc in the middle of the whole screen. Yours seem to do so automaticly. How? What am I doing wrong

[@waltz9230]

Display Flex my friend. You don't have to manually position.

[@felixquansah5214]

Great tutorial.... Am I the only one who's experiencing a situation where when moving the mouse causes the circle interaction to glitch? It seems fine when applying the interaction on either the X axis or Y, but when both are applied and tested its movements become very jerky. Anyone experiencing this?

[@Webflow]

Hi, Felix! This can happen if your X animation and Y animation are conflicting - can you check to make sure that the X animation and Y animation are affecting different axes of rotation? In other words, if you're rotating something along the y-axis for 0% and 100% in the top section, the bottom section can't have any actions that ALSO rotate along the y-axis - they can only rotate along the x-axis or z-axis.

[@felixquansah5214]

@@Webflow wow....that was fast. Just checked it out! It works now!!! You guys really are awesome. Thanks 🙏🏽

[@person81045]

Videos are awesome, my guy just goes a bit too fast. Idk if this is because I'm still a newbie, but I have to go at 0.75x whereas any other product training I'm going at 2x.

[@Yaedon]

Loved the course until I couldn't follow along because of a paywall for embedding code -_- thought yall was better den dat

[@Webflow]

Hi, slowburn! We're all about adding CSS filters like background-blur to ALL accounts in Webflow, but we're currently blocked on that until Firefox is able to add support for it so we can enable for everyone. At that point, we'll have a code-free version of accomplishing this visual style! But for the time being, we'll need to rely on custom code for this styling. This shouldn't impact building anything in the course except for the blurry background behind this box. Sorry for the inconvinience! Super excited to share the update with you as soon as it's available. 💙

[@Yaedon]

@@Webflow 🙏👌🏻

[@andre_cz13]

@@Webflow oh that's awesome. can't wait 😁

[@slipstream01]

Anyone here learning to start freelancing please connect and help a brother out. :)

[@tz5379]

bruh, why he talks so fast. so hard to follow. ugh

[@Dietereater]

418