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.

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

#21dayportfolio

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

----------

[Webflow]

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

[topemeister]

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.

[youstubers]

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.

[person]

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

[lumanastudio-zx]

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

[VinaySC]

That one dislike is either from Squarespace or Wix

[AbdulmalikAhmed-kh]

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!

[salimli]

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

[iyadzuay]

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

[moon-man]

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

[nicolaspettini]

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

[djjoy]

It's really easy to follow thanks!

[TheBrandSamurai]

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

[Digitalism_]

Really love the hero section and glow idea! <3

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

[Svetlana-hkmm]

Thanks a lot! Your explanation is great!

[dejankeleman]

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.

[shabatidjani]

lol the hovering pen in this tutorial is just insane 😂