Creating custom 2D & 3D interactions - Build a custom portfolio in Webflow, Day 13

[@Webflow]

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

[@topemeister3000]

Shout out to Webflow. I can't think of any business that has provided such well-structured, detailed, AND entertaining tutorials on their software... For free too. Game-changing stuff.

[@baniaf]

END GAME, all my love for webflow!

[@youstubers5722]

18:44 The pen! You slick GOATs. Beautiful way to illustrate the concept!

[@glaDos-]

I never had to watch a Webflow tutorial twice. Every tutorial is clean and 100% understandable. I don't need to skip paid sponsors or like this follow that parts. They are really the grandmasters of Tutorials.

[@VinaySC]

That one dislike is either from Squarespace or Wix

[@Jointbeta84]

xD

[@MikeShamberg]

hahahahha

[@infinitedesigns_io]

Gotta be Weebly

[@Elisabethjuks]

@@infinitedesigns_io hahaha

[@lumanastudio-z1x]

Wow! A high level of teaching and creating content is happening here

[@domloreto]

the subtlety of the sticky note being pulled off the screen was so impressive at 19:13 on bottom left of screen, what a flex. LOL I've been loving these tutorials!

[@Webflow]

Some behind-the-scenes trivia: it was a separate sticky note attached to a separate thread, and Grímur was off camera and yanked it away. You could say Grímur is the one pulling the strings.

[@person81045]

that pen thing had me for a loop. This is too fun to watch.

[@MikeyDLuffy]

When I change the Z-index to -1 at 21:06, instead of our new image showing up behind our project images, it disappears completely. I noticed in your video it says "Relative to: Body", whereas mine says "Relative to: Collection Item" but it doesn't allow me to change it. I'm not sure if this is the problem but any idea on how I can get the image to appear behind so that I can blur it for the effect?

[@Webflow]

Try making sure that your Collection item doesn't have a position of relative. If it does, set that to static. Hope this helps 😀

[@waltonstudio]

I’m also having this issue. The step before we are told to set the collection list to absolute so that the ‘selected projects effect’ image fits the width. But whether this is absolute or static - changing the z-index to -1 makes the image go invisible. Any suggestions?

[@waltonstudio]

Solved - the ‘Section’ that contains the collection list had a white background applied. I removed this and now the new absolute image appears below 👌 hope this helps

[@Lordonez]

@@waltonstudio

[@pengoe222]

@@waltonstudio Thank you! Was exactly my issue as well

[@Webflow]

Note: we've updated the portfolio course assets to match the later lessons in the course. wfl.io/portfolio-course-assets Be sure to get the latest assets and all the cloneable projects for this course from Webflow University. wfl.io/2021-portfolio

[@letsui]

Please i am facing a challenge: When I convert the "Project Details" to a link it rather makes the div block transparent

[@letsui]

Fixed it: Turns out I had to select the Collection items and Get the BG Color from Projects - the Project color.

[@РусскийгидвМексикеСергейСюткин]

thanks a lot@@letsui ! But I did not understand why this even happened and why no questions about this issue from other users...

[@salimli4233]

you guys the best. That pen thing... hats off sir! You make not only got product, but also fantastic tutorials!

[@AbdulmalikAhmed-k9h]

Great work to Webflow. Your tutorials stills stands the test of time. a observation I struggle with in hover effect (in updated interface) I had to set the (selected project Effect) to affect selected image instead of class before it worked. thanks for the hard work.

[@MichaelFagan-c3h]

Thanks. This helped trigger the hover on state. However, there's nothing I've found to get the hover out state to work. The effect works in the Interactions Menu when I press the preview button, but not when I preview the actual site. Dang.

[@moon-man155]

Wow! I'm incredibly proud of what I achieved so far. All thanks to Webflow University. I'm sheerly amazed by these animations.

[@karl8457]

25:32 visible changes occurred. the left side became transparent for me when I Rclicked and clicked convert to link

[@kurkawodna6859]

same :/ did u fix it?

[@nicolaspettini3143]

Such GREAT tutorials! Very clear, precise and fun at the same time!

[@iyadzuay6112]

you guys are amazing, I love you all, keep going I always tell my clients to buy your plans, great work is a free advertainment))

[@andrewang1]

I am having trouble where when I convert the div block of the project details to a link block in 25:42 it makes the div block transparent. Any help?

[@Webflow]

Try right clicking on the DIV and converting it to a link block. If that doesn't work, try adding a link block and moving all the child elements from your previous DIV block into it. Hope this helps 😁

[@platondavydov]

@@Webflow I have the same issue. It turned out that at the moment when the div-block is converted into a link-block, the project-color from the Project collection falls off and it needs to be assigned again. This is how I solved the problem in Dynamic Style Settings.

[@platondavydov]

I have the same issue. It turned out that at the moment when the div-block is converted into a link-block, the project-color from the Project collection falls off and it needs to be assigned again. This is how I solved the problem in Dynamic Style Settings.

[@person81045]

For anyone confused on how to fix this the easier way: 1. Convert to link block 2. Click on Gears icon from top of the right panel 3. Go to Dynamic Style Settings section and check "Get BG Color from Projects". 4. Select from the dropdown "Project Color" 5. Be happy.

[@sangeethababu0915]

​@@person81045 Thank you! I was worried that I was not able to reproduce according to the video. Now, I'm happy! :)

[@djjoy1]

It's really easy to follow thanks!

[@jas.minex_]

For some reason (25:35), when I try to convert the div block to a link block it goes blank? Also when I try to convert it back it remains blank (white)? Has anyone experienced the same issue?

[@waltonstudio]

I also had this issue but solved it by relinking the dynamic style settings by clicking on the cog top right, activating the ‘get BG color from Projects’ then selecting ‘project color’ from the drop down

[@maliktanzeel1866]

@@waltonstudio thanks

[@Digitalism_]

Really love the hero section and glow idea!

[@TheBrandSamurai]

So . . . I had to go back thorugh this whole video to look for the pen. Legendary!

[@dominic7983]

My overflow hidden on the "Hero camera" class at about 7:40 is not acting as yours is. The overflow doesn't kick in and I get a diagonal grid with corners up and down instead. I've tried cloning the project and I cannot for the life of me find out why mine behaves different? I checked the parent element (section) and that was the same as the clone so I'm a bit lost. Anyone else run into this? Besides my difficulty here, this is a great course!

[@dominic7983]

Edit, after an hour of trial and error and research, I wrapped the "Hero camera" in a div block and set overflow to hidden. This seems to have been a workaround that I can proceed with but I'm still bothered about why "overflow hidden" does not affect my Hero camera.

[@Svetlana-hk3mm]

Thanks a lot! Your explanation is great!

[@keunekeune]

3:07 is there a way to bulk rename div's and their class?

[@charles6685]

Well... You can't per se, but you can actually save time by making one class, then just copy paste your elements.

[@Webflow]

All we can say right now is that we 100% agree. Stay tuned.

[@keunekeune]

@@Webflow Noice!

[@thejaysehansen]

@@Webflow YASSSSSSSSSS!!!!!! Was about to be one of my biggest feature requests!

[@shabatidjani1354]

lol the hovering pen in this tutorial is just insane 😂

[@craftykatie2524]

I can’t seem to get the blur and color behind the picture. I followed all the steps, i don’t know what i did wrong?

[@charles6685]

Have you set the z-index to -1?

[@craftykatie2524]

Yes

[@charles6685]

@@craftykatie2524 maybe share a read-only link? For troubleshooting purpose.

[@raducosminpugna7222]

i got the same problem following the exact instructions. try this: when you start doing the interactions, do the "selected projects effect" interaction first, the one starting at 23:05, then go back to the "collection item" and add the "mouse hover" interaction there and select the "selected projects hover" for the "on hover" interaction and the "selected projects out" interaction for the "on hover out". also don't forget to set the "selected projects effect" opacity to 0%. hope this helps.

[@yoboibundee]

​@@raducosminpugna7222 I am experiencing the same problem as ​ Crafty Katie, but unfortunately your instruction doesn't really solve the problem. When applying the "mouse hover" interaction to the "collection item" it is the selected project that fades in and out on hover.. I feel like it is because when giving "Selected projects effect" the z-index of -1, it gets put behind the body or some other element and therefore it doesn't show up, but I haven't figured out how to fix it :/

[@gabrielgeorgiev9950]

Amazing work! Thank you

[@craigburton4447]

Would be nice to be able to rename multiple similar elements at one time instead of clicking each separately

[@KaranPatel-cs6lt]

Man who is the speaker, this is the best speaker I have ever seen, I want to follow him , give me the name..haha

[@harenzpiape9618]

To anyone experiencing issues with the hover effect in the current version, you can solve it by setting the 'Affect:' option to 'Selected Element'.

[@ihajo]

Wow that pen was from the start hovering 😂

[@alantocheri]

Love the power Webflow has with animations. But I'm wondering if you can have multiple triggers for 1 animation and to track that object's state? Click a button to toggle the appears of an object (fake window) and also have a "close button" within the object. I haven't been able to find anything in the forums.

[@charles6685]

You could set the first mouse trigger(tap) animation to open up *let's say you name it pop up div* that you want, set the *pop up div* to relative. Inside the *pop up div*, you will need to make a new div for the close button, you can put your X image or SVG in the "close button div" that you have set earlier. Set the "close button div" to absolute, then position it to top-right or top-left depends. On the close button div, you can set the first mouse tap animation to close all the *pop up div* I guess that is what you want to achieve? Let us know for any further problem.

[@alantocheri]

@@charles6685 Yup, basically what I had. A toggle button with 1st click: show window, 2nd click: hide window. Second trigger "X" within window to close it. But then first trigger is out of sync. If-statements or status check (visibility in this case) would be awesome.

[@charles6685]

@@alantocheri have you set the first trigger to have an initial state? Or maybe you can share your project to read only, so that we can inspect it, and see what's wrong with it.

[@gwench9657]

Another gread video! However I'm having some trouble with the hover effect, for some reason it won't trigger when the z -index is set to -1

[@dejankeleman1918]

Hey Webflow awesome stuff! I am looking forward to every new video in this series! I have a question regarding the animation. The pen, how did you achieve this, z index 9999? Kidding, I was wondering in that first animation, can we have more images going off-screen (not visible) so when user scrolls they come to view, like in your animation but having let's say one more image in the bottom and top row so they come into viewport by scrolling? This in my opinion would add some value to that animation. Great content keep it up, boys! Will share by using the hashtag I promise.

[@ForhadSattar]

I'm trying to follow along but on my rotate animation display I don't have any Y or Z axis. Why is that?

[@goldenant9450]

the most confusing thing about animating is class vs combo classes. for example, do animations on combo classes override animations on the base class. and can you pick and chose either within the same animation or do you need to create a new animation as you did with .hero-image-bottom. usually webflow forces me to apply to the combo class as a whole when i'd like to apply it to only the first class...and then things get messy.

[@tonydataiga]

These are my favorite tutorials and should be the standard for any tech teaching! One question: How do you deal with pictures that are not all perfectly the same size? I tried loading my own images, and it's a dumpster fire!

[@JoyChien-tm2bn]

assign the same class. set a fixed width or height so that they all line up. if you also need to crop then you will need to play around with how the content fills (cover, contain etc), or turn into bkgd img for more control

[@kai4824]

What happened at 19:13 :0

[@ktkyletaylor8212]

So subtle. so perfect

[@jimmoefoe1471]

What exactly happened while adding the children perspective here?

[@fionnlennon8990]

When setting opacity to 0%, only the blur/glow beneath the element disappears - it still is visible on all other sides. Any suggestions?

[@charles6685]

Make sure that you have selected the right class for the animation.

[@chrismlone]

Would this be possible with a collection list of the images inside a grid and still have the images move left and right? Stuck on how to do that with a collection list.

[@farooq-ux]

Hey Chris, I am also stuck at the same thing. I think custom code may help here.

[@123jeffries123]

Whenever i duplicate the selected project picture it goes behind instead of underneath anyone know how to fix this ?

[@SuperTenja]

Wow!

[@lucaskowronek8035]

Hey guys I#m doing something wrong... the first picture in in the upper row seems to disappear for the first frames but after the first two frames it snaps back into place Thank you

[@beatricetodorova2697]

I am sure you've already found the solution, but for others who may have the same issue: took me some time to realize that my page is empty, and I had just the hero, so the start and end of the page is too close and the photo was disappearing, so just add more elements to have the scrolling longer. 😅 (beginner's struggle)

[@des7638]

So cool

[@F-doy]

Amazingggggggggggg

[@amerjandali689]

can't we do this with scroll on view?

[@Webflow]

Hi Amer, with scroll-into-view animations it's possible to animate 2D and 3D animations, however they aren't active scroll animations. Please let us know if you have any questions! We're here to help: university.webflow.com/support

[@carlsonsmith1708]

how many people rewind just to see if the pen was really there all this time lol

[@Webflow]

👋 We did!

[@yellowcopy4038]

@@Webflow Where did the pink post it go?! Will that appear in another video?

[@youstubers5722]

100%. Couldn't sleep right without double-checking it.

[@bedeccus]

@@Webflow Maybe you should also create a real support for troubleshooting. Animations randomly and very often going off for no reason. Your topics are full users experiencing this and no effective support on it. I am expecting from a paid a service nothing like this.

[@jonnysplsh]

Great video. The end is kinda creepy 😅

[@ramireztoscanoalma]

Bye bye Wix...I'm moving on to Webflow!

[@lalatiana7212]

There is no subtitles :'(

[@bedeccus]

Maybe you should also create a real support for troubleshooting. Animations randomly and very often going off for no reason. Your topics are full users experiencing this and no effective support on it. I am expecting from a paid a service nothing like this.

[@sefa8626]

9:03 “the end result is empty”😂

[@peakflava]

that levitating pen caught me off guard lmao

[@Webflow]

😂

[@thabianblondon1231]

❤️

[@mariacristinapalacioarbela506]

The pen was like 🤯

[@manchest100]

Oh my god. Wtf. You can do this?

[@shaicohen2]

I said the exact same thing! Over and over and over....

[@azzammeeralam]

2 dislikes, one of them from WordPress..

[@valentinalba6272]

at 23:42 I change the opacity but it does not dim the "selected projects effect image" can anyone help?

[@Webflow]

Try posting your question on the community forum for more help: discourse.webflow.com . Don't forget to add your share link to the post so people can look into your project. university.webflow.com/lesson/share-your-project-and-invite-collaborators