3D parallax password page - Build a custom portfolio in Webflow, Day 15

Protect your pages with a password page that is both secure and engaging. In this lesson, we’ll visually build our ROYGBIV grid in 3D space directly on our page and animate it to follow mouse position.
(1/7/2022 Note on Z-Axis issue: We are aware of this and have provided a workaround while we create a fix for it. Please refer to this video for more information: share.getcloudapp.com/nOu9NkGJ )
00:00 - Day 15, begin
01:02 - Password-protected page
01:28 - Password page
05:25 - ROYGBIV 3D grid
11:27 - 3D grid rotation interaction on mouse hover
15:40 - Password protect your page
16:14 - Recap
Get early access, plus downloadable assets and cloneable project for every lesson: wfl.io/2021-portfolio
#21dayportfolio
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
webflow
webflow

[@Webflow]

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

[@nickmcloota5786]

This definitely does not work anymore... I'm redoing the exact steps over and over and the ONE thing that seems to not be the same as your demo is when I'm adding the negative z-transforms, my cell color divs don't even appear. It's like they are stacking on top of eachother without actually moving along the z-axis. It feels like there is something blocking anything on the -z-axis from appearing maybe? Please help!

[@customocca]

@@nickmcloota5786 Same here, did you manage to solve the problem

[@chriskalil4359]

The opening of this video is too good. I can't imagine that taking a single take to do. Props to you guys!

[@Aiiviis]

The opening is hilarious! Love it! Keep on good work!

[@TheStringBreaker]

OMFG I absolutely love Webflow because of little details like this. Thank you for putting so much effort into these videos! You guys deserve an Oscar!

[@joominchoi]

I was stuck and struggling on this stage for ages as well so I wanted to share a few steps, starting at the 9:26 mark, which helped clarify the concepts: 1. Adjust Perspective on Utility Page Wrap: - Navigate to the Utility Page Wrap. - Change the Children perspective by setting the Distance to 1000px, as shown in the video. 2. Apply Rotation to Password Interaction Grid (this is done later on in the video but by applying it sooner helped me visualise the layers better): - Navigate to the Password interaction grid. - Under Effects -> 2D & 3D transforms, add a rotation on either the X or Y axis (it doesn't matter which as long as it's not 0). By following these steps, the grid takes on a slight angle. This adjustment becomes crucial when later adding values like -10px or -20px to Password cell colours, aiding in visualising their movement on the Z-Axis. *I also recommend to NOT change the opacity of the colours initially. This preserves distinct layers and colours for better visibility. My understanding may be wrong but I’ll try to explain: Imagine 7 stacked lego pieces. When viewed directly from the top, only the top piece (Violet, the last one added) is visible. However, by introducing a slight angle, akin to looking at the lego tower from any perspective, all different Lego colours (Password cell colours) become visible. This simulated angle is achieved by applying rotation on the X or Y axis. If we rearrange the top Violet Lego to the bottom (level 1), the order changes from Violet (7), Indigo (6), Blue (5), Green (4), Orange (3), Yellow (2), Red (1) to Indigo (7), Blue (6), Green (5), Orange (4), Yellow (3), Red (2), Violet (1). Returning to the direct top view, where Indigo is now at the top, we can't see the layers behind it. Thus, visually confirming whether Violet has been sent to the back (negative on the Z-axis) becomes challenging. I think the lack of a visual change in the designer when initially setting Z-Axis values for the Password cell colours is intentional and makes sense. It was just made confusing when on the tutorial there is a visual change even before changing the angle on the X / Y axis. The lack of visual change makes sense if there is no angle and we are still looking at it from the top like the lego tower. However, altering the grid's angle on the X or Y axis later allows for the visualisation of the different layers but I am suggesting to do this sooner to alleviate the confusion. Hope this helps and let me know if my understanding is incorrect!

[@Exhodius]

Apparently my previous comment has been deleted, but webflow posted the solutions under someone's comment here.

[@joominchoi]

@@Exhodius Thanks I checked it out! Thought I'd share anyway what helped me understand the concept and tool better ✌

[@nickmcloota5786]

I still am struggling but maybe I'm just frustrated. Will return and try again. None of my divs on the -z-axis are appearing with a rotation already set or not, they're just not there.

[@jannikneuwirth2243]

This is the best tutorial series I've ever seen.

[@billbuckleytutorials]

Honestly... the best intros on the web! hands down

[@rany2126]

I bet you nailed that intro on the first try.

[@shutterbruhs]

Hello there! I noticed a couple of others with the same issue but I cannot get the 3D parallax effect. I’ve compared to the clone-able version and rebuilt the grid and related classes twice but it is still a flat plane. When it comes time to set the z-axis, it doesn’t work. I have the Utility Page Wrap children’s perspective set to 1000px. Any help on this or is there a forum somewhere where I can find answers?

[@JeffTetlow]

I really wish they would address this. Im skipping this tutorial unfortunately as I'm having the same issue.

[@mmirenaa]

Same here. I was experimenting with moving both x and y axes by 2 degree each for each color (orange 2x2, yellow 4x4, green 6x6, blue 8x8, indigo 10x10, violet 12x12), and only I could get is the initial view of moved squares as it was in the tutorial. Howver, when I started to rotate them in perspective, they behaved as 2D, not 3D.

[@chinosantrax9906]

replayed this video several times, but still having the same issues with the 3d effect.

[@waiaio_art]

Heya, I'm a noob but I have the same issue. It doesn't work in the designer, but once I go into preview mode the effect works. I use chrome, and it seems the perspective doesn't work unless you're in preview mode. It's frustrating not being able to see your work in real time, but if you follow the instructions the results are the same, I hope it works out for you :)

[@JeffTetlow]

@@waiaio_art thanks, but unfortunately my effects works neither in preview nor in the published site, and I am using Chrome.

[@kai4824]

YES YES YES FINALLY , WAITING FOR HOURS FOR THIS ONE

[@satoriwp3690]

That intro is GOLD. 😍😍

[@bukankapi4014]

everytime they make vidoes like this i enjoyed more their sense of humour rather than the actual tutorial

[@nwobuchinaunsoo]

Hi the z axis isn’t working when I tried to recreate the parallax effect I thought I did something but the x and y axis seem to move the colored password div cells but the z axis remains unresponsive

[@robinzon100]

i need every tutorial to be like this one from now on :DDD

[@magnamakers3219]

at 9:42, I cannot create the depth after I changed the transformation Z-axis to -10. Could it be a browser issue?

[@isaacosei8299]

I am having the same issue. Been stuck on it for a while. Let me know if you find any solutions, will do the same.

[@Webflow]

Found the issue and a workaround for now: share.getcloudapp.com/nOu9NkGJ Hope this helps 😁

[@platondavydov]

@@Webflow THANK YOU! It's helps!

[@paulethmunoz1763]

@@Webflow Helps a lot! THANKS!!!

[@lainlou2298]

@@Webflow Helps a lot! THANKS!!!

[@Anoti]

This should be on Netflix ❤

[@mxss.12313]

You guys are so talented and funny 😂

[@AlexPresa]

the intro > any other video webflow will come out with this year. Dang.

[@Webflow]

Just wait.

[@AlexPresa]

@Webflow i am now scared 👀

[@ramivideos167]

ALL YOUR VIDEOS ARE GREAT! I like the cool concept - WOW

[@magicrevolution4034]

So creative and very simple to create with Webflow! That would've take me a few hours to do just by coding it for sure

[@benjaminaguilera8097]

Tried this exact method but it broke on Safari. It doesn't respect the Z index for whatever reason. Anyone knows why?

[@benjaminaguilera8097]

@Temi Kelani Yes, actually. I put the whole effect in a Div block, separate from the glass div block, and then used Z index on those instead of the grid. That worked out on Safari and seemed the same on all other browsers.

[@Webflow]

Found the issue and a workaround for now: share.getcloudapp.com/nOu9NkGJ Hope this helps 😁

[@TheBrandSamurai]

Oh my god! That was the best intro EVER!!!! WOW!

[@jboremus]

Webflow you're the real MVP

[@pawewisniewski35]

Your format is awesome.

[@grandstudio1673]

Followed all the steps and it comes together nicely until the very last part where the hover moves the 3-D element which is great, but the element breaks the plane and enters the password layer with z index of 3. I trying to troubleshoot it even by changing z-index to a higher number for password layer and negative number for the utility page wrap, but no success. Would love some assistance please. I am using Safari browser.

[@Webflow]

Note on Z-Axis issue: We are aware of this and have provided a workaround while we create a fix for it. Please refer to this video for more information: share.getcloudapp.com/nOu9NkGJ

[@TheYahn]

I suppose this is where the free tier crowd needs to get crafty with creating additional pages :) Let's see now....

[@Webflow]

Hi, Dejan! Custom password and 404 pages are included in free plans, and we’ve also included cloneable projects on Webflow University for each stage of the course, complete with every page needed to follow along and build a portfolio! wfl.io/2021-portfolio Keep in mind, password protecting different pages in a project will require a site plan.

[@TheYahn]

@@Webflow ahh yess I forgot! Thank you

[@zainabanjum8702]

I've done everything in this tutorial. The z axal thing was not working for me at first but I followed the link you provided...but I can't see anything when I'm in preview mode...it's blank. I can see the utility page content but not the rid animation...hope you can help me.

[@BeyondTube]

is your issue solved?

[@mauriceledoux1649]

Thanks for the workaround on getting the z-depth to work properly. However im encountering another issue where the rotation doesnt seem to be affecting the z-depth properly? Im pretty sure Im following the steps (including the hack), and Ive even deleted and redone everything just to be sure. Basically when I rotate the Password interaction, the parent rotation seems to be inverted relative to the children's perspective? eg if I rotate along X at +30 deg, that should push the top of the grid away, like in the video. However the top appears to come closer (the top row looks larger while the bottom row looks smaller). The depth rotation seems to be working as expected however, as if im viewing each grid cell from the bottom side. Have there been any updates in the last several months that break this animation? Or am I just losing it? hahah

[@HappyFaceA]

I'm having the same issue. I spent hours refollowing the tutorial over and over so I'm pretty sure it's an update that broke the workaround. I guess they forgot about trying to fix this...

[@timothyojo6674]

I'm was having the same issue. The solution is to apply the same children perspective to the actual utility page wrap div block in addition to the actual password interaction grid.

[@connorbyram5221]

@@timothyojo6674 thank you!

[@grantemerson5932]

@@timothyojo6674 Great tip Timothy! Thank you

[@kevintaljaard8399]

Was having the same issue and this tip fixed it !@@timothyojo6674

[@nasmith67]

issue still not fixed for me in Arc (23.11.22) or Safari. The Scale workaround is working though. Wish I knew the code fix but if it's been this long for people with WAY more tools than I....

[@13rast]

9:52 - move/type z does not work for me((. (to create a 3d perspective effect, add children perspective to password cell color parent (container) or individual perspective to password cell color) I don't know where is my mistake(((

[@Webflow]

this trick should help: share.getcloudapp.com/nOu9NkGJ

[@13rast]

@@Webflow thanks Bro! but still not working

[@yurilili-g5z]

@@Webflowlove you so much!!!!!!!!!!!!!

[@MikeA99]

@@Webflow Thank you!

[@watchus020]

how is your grid perfectly centered in the page right away when u drag it in. Im always having problems centering my containers and grids etc.

[@alphafoxcreative1731]

Why does the password button still work even when the user does not input a password? How can I resolve that? I expected a prompt to enter the password if one is not entered before interacting with the button.

[@djpauljerezz]

Yeah you really deserved that B Series jajajajajaj nice intro

[@AdventureJonesing]

Hi! I can't add the HTML Embed because I am on the free plan just following along. Will this affect my studies? @webflow Thanks!

[@Webflow]

No it will not. But you can read more about that feature here: university.webflow.com/lesson/custom-code-embed Also, if you're a student, you can learn about getting more access to features for free here: webflow.com/for/classroom Hope this helps :)

[@andreas_blomqvist]

Haloooo mr.Webflow, pls fix! There seems to be a missed step or something, I cant create the z-index effect like everyone else here. Thanks!

[@Webflow]

Found the issue and a workaround for now: share.getcloudapp.com/nOu9NkGJ Hope this helps 😁

[@andreas_blomqvist]

@@Webflow Love you!

[@AARIV]

I can't even create a new page to follow this tutorial. To anyone suggesting, "Why don't you buy a premium plan then?" why should I invest in a premium plan for an app that doesn't yet help me earn anything, especially when I'm still in the learning phase?

[@anteaaurrekoetxea3447]

You can use the default Password page for it :)

[@hidossaji]

Data is proud!

[@hafizazman6786]

hahahahahahaha funniest intro, love you guys

[@heyfede]

You’ve created all the pages allowed by your free plan. To add more, upgrade your site plan. :(

[@Webflow]

If you haven't already, make sure to enroll in the free course on university.webflow.com. Each lesson in the course comes with a cloneable project so you can follow along - and cloned projects already come with all the pages you'll need to follow along! Here's a direct link: webflow.com/website/Portfolio-course-3D-parallax-password-page

[@jayghost_music]

Is it possible to make this function on mobile? I'd like to link it to the movement of the phone.

[@Webflow]

Stay tuned.

[@timmyvegas]

I. love. you. guys.

[@timothyojo6674]

Is it just me or I expected the 75vmin to be larger than that for the password cell div?

[@Webflow]

The password field does not have a width or height set to it. Are you referring to something else?

[@Cowbowbebop312]

Anybody have trouble with the lock image being huge? Tried resizing but it then flushes to the left. I then aligned center but then the submit button reverts back to it's regular width

[@DhannuGamer]

Yes ! you can align from Align option at frosted glass

[@unofficialnickcantu]

Dang, they really did IKEA like that.... hahaha

[@person81045]

OMG that opening loooooooooooooooool

[@botbot3698]

this is very cool

[@NOBODY-bm1ym]

My 3d viewing is not working

[@magnamakers3219]

Are you talking about when we change the "Password cell color" class to have -10 on the Z-axis?

[@its.suhail__]

@@magnamakers3219 Facing same issue!

[@Webflow]

Found the issue and a workaround for now: share.getcloudapp.com/nOu9NkGJ Hope this helps 😁

[@kapeigood]

best of the best

[@king_m]

The opening banter. lol

[@tyronvdbeek]

Haha, that would be a lot of password changes grimur 🔒

[@voss779]

What was I watching in the first few seconds? 🤣

[@djpauljerezz]

JAJAJAJAJAJAJAJA that was so good

[@moon-man155]

I really wish I could do this tutorial without having to upgrade to a paid plan. Any kind consideration for this broke 3rd world citizen? :(

[@Webflow]

You can still create this 3D parallax effect on a regular static page rather than on a password page.

[@moon-man155]

@@Webflow ​ Thank you so much Webflow. I was totally not expecting a response. Just wanted to say that I absolutely love making websites using your product.

[@mickmcg7130]

Ikea has mediocre food !!

[@modisana]

Ruuude.