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

In this lesson, we’ll visually animate our elements directly on our page and create mind-melting 2D and 3D interactions that are triggered by mouse hover, page scroll position and page load.
Note: we've updated the portfolio course assets to accomodate for the rest of the course. Remember to download the most recent project assets from the course page. wfl.io/portfolio-course-assets
00:00 - Day 13, begin
00:38 - Timed interaction (based on page load)
12:41 - Continuous interaction (based on page scroll position)
19:20 - Glow hover effect (based on mouse hovering over the card element)
26:54 - 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.

[@VinaySC]

That one dislike is either from Squarespace or Wix

[@Jointbeta84]

xD

[@MikeShamberg]

hahahahha

[@infinitedesigns_io]

Gotta be Weebly

[@Elisabethjuks]

@@infinitedesigns_io hahaha

[@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.

[@person81045]

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

[@user-jl9db7zb8m]

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.

[@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.

[@nicolaspettini3143]

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

[@Digitalism_]

Really love the hero section and glow idea!

[@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))

[@salimli4233]

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

[@djjoy1]

It's really easy to follow thanks!

[@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.

[@gabrielgeorgiev9950]

Amazing work! Thank you

[@TheBrandSamurai]

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

[@Svetlana-hk3mm]

Thanks a lot! Your explanation is great!

[@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.

[@user-ry9vh9vl4j]

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

[@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.

[@shabatidjani1354]

lol the hovering pen in this tutorial is just insane 😂

[@des7638]

So cool

[@ihajo]

Wow that pen was from the start hovering 😂

[@SuperTenja]

Wow!

[@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

[@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

[@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'.

[@craigburton4447]

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

[@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?

[@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

[@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

[@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.

[@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.

[@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.

[@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! :)

[@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?

[@123jeffries123]

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

[@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.

[@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.

[@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

[@thabianblondon1231]

❤️

[@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!

[@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 :/

[@jimmoefoe1471]

What exactly happened while adding the children perspective here?

[@mariacristinapalacioarbela506]

The pen was like 🤯

[@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)

[@jonnysplsh]

Great video. The end is kinda creepy 😅

[@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.

[@kai4824]

What happened at 19:13 :0

[@ktkyletaylor8212]

So subtle. so perfect

[@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

[@peakflava]

that levitating pen caught me off guard lmao

[@Webflow]

😂

[@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

[@ramireztoscanoalma]

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

[@lalatiana7212]

There is no subtitles :'(

[@sefa8626]

9:03 “the end result is empty”😂

[@manchest100]

Oh my god. Wtf. You can do this?

[@shaicohen2]

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

[@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.

[@azzammeeralam7182]

2 dislikes, one of them from WordPress..