In this lesson, we'll be building three different interactions. And the whole concept here is based on two things, a trigger and an animation. When we do this, animate that. And we can set up all kinds of triggers, hover, follow the mouse, scroll, click, and we'll use different triggers on each of these three. We'll build a timed animation. When the page loads we'll have this animation, we'll build a continuous animation. It's always looking for our scroll position and moving the cards in the Hero section based on our scroll. And finally, we'll do this glow effect on each of our project cards. Let's start with the first one. Now we have an image element. This is our Hero image for right now, we're going to replace it and we'll use a Div block to do that. Let's go in and drag a Div block into our Hero section.
We'll do it inside the section, but outside the container, not inside the container. We'll put it right above the image. And we'll set the height right now using pixels. Let's set the minimum height or let's set the height to 500px. That looks okay. Now we have this Hero image, this existing JPEG. Instead, we're going to drag in six individual items. And the reason we're doing that is because we want to set up an interaction on each individual element. We want to play with individual elements. So our Div block with it selected let's Ctrl+K, and let's enter a grid. Now we have a grid sitting inside that Div block. We're going to do three columns and two rows just as we see here, the reason we have three columns and two rows is we're recreating that image underneath. Let's click out. So we're done editing the grid and we're just going to follow this order.
So let's go into our assets and we're just going to drag each image in following the same order we used before. Third image, then we have photography. This is our fourth image. Fifth image. And for our final image, we have that building this project. Drag it into the last cell. And to sort of match the spacing, let's select our grid. Let's of course call this grid Hero images. Let's edit our grid and we'll increase the spacing. Hold down Shift and we'll drag to create, let's say 40px matches pretty closely to the visual there. Let's press done. Now it's up to us, whether we want to add that black background. If we want to with Hero images selected, we can go down and add a black background, or we can do a light gray.
For now, let's remove the background color so we go to the default transparent. And the next thing we want to do is select our images and add a class. We're doing this so we can make changes to all the images at the same time. Let's call this Hero image. This might be a little confusing. Let's rename Hero images to Hero image grid, and then we'll go in and apply Hero image to each of these. Ctrl+Enter Hero image. We can use the left and right keys to select between sibling elements. So we're just going to press right Ctrl+Enter Hero image, press right, Ctrl+Enter Hero image. Last one, Ctrl+Enter Hero image.
So now they have the same class applied and we might want that in the future because it might make sense to add a box shadow to it to visually differentiate between the image and the background. Let's drop this way down. That looks okay for now. We can always come back and change this later. So what have we built so far? A few different things. First off, let's select our original image or Hero image, and let's hide this for now. We'll call this original Hero image and we're going to set this display to display none. So it doesn't render on the page. So this is our current Hero section, not bad. What does it look like when we preview?
Let's grab the edge. It's responsive by default. It's not the most impressive thing ever made. Let's go out of preview and let's build our interaction. Let's grab our canvas and widen that. And we'll set our original Hero image back to block so we can see what's going on. It's okay that these things are overflowing right now. They're hidden by our Hero image because we're about to add our interaction on the grid. So a couple of things here. An interaction is split into two categories. There's triggers again, there's a trigger and an animation. When this happens, then this happens. There are two types of triggers. There's an element trigger when someone clicks on an element, they hover over an element, they mouse over an element, they scroll into view when that element scrolls into view. And of course, while that element is scrolling with the view, but those are triggers on the element. What about on the page?
Well, page triggers happen when the mouse is moving in the entire viewport or when the page is scrolling, when the page loads, when the page is scrolled. We're going to use a page load transition here. So let's click that. When the page loads, there are two options. When the page starts loading, we can do something and when the page finishes loading. We'll choose when the page finishes loading and let's start an animation. So when the page finishes loading, we want to start an animation and we're going to make a new one. We have none in our current project. So we're going to make a new animation. Let's call this Hero page load. And what do we want?
Well, we're using this as reference. So we'll get rid of this Hero image in a moment. But for right now, we want when the page loads, we want let's say to move this. And what that means is this, if we add a move, let's say we move to the left, say 500px to the left. If we hit play, when the page loads, it's going to move from its starting position 500px left. Not the most impressive thing ever, but we can do more. Instead of moving at 500px, let's actually remove that. In fact, let's remove, let's delete that action altogether. Instead, we're going to do a rotate and on page load, we're going to rotate this. So it looks similar to what we see underneath. Say about nine degrees, 9.5 degrees matches pretty nicely.
So right now it's not too impressive. We hit play, it does that, but there's a couple of things we can do to make this better. Let's save our interaction for right now. And we'll go back to the Style panel because we have this Div block, the parent, and we're going to turn this Div block into a camera. And we're going to rename the Div block, camera or Hero camera. And all we're going to do to turn this into a camera is enable children perspective. Under 2D and 3D transforms, we're going to click the three dots to access transform settings. Then we're going to add a children perspective. We'll choose 1000px by default. The lower this number is the more dramatic. The 3D perspective is going to look. The higher the number is the more flat than isometric the look is going to be. So 1000, a nice middle ground.
Let's go back to our interaction. And on page load, we have this, we created this timed animation, let's go back in. Again, If we hit play now, not too impressive, but let's add a tilt. So we're going to click this action. This action so far includes rotating about the z-axis. Let's rotate about the x-axis as well. Here we have a slight tilt effect. Hit play. Little more impressive, still not perfect. So let's change our ease in from linear to ease in out, hit play. We're getting somewhere. Let's slow this down to say five seconds. That's looking a lot nicer. Let's save for the moment. And we'll go back to our Style panel.
Because right now our Hero camera, if we go to preview mode, we can see these images are sort of leaking out. They're overflowing on the bottom and we can't see it, but they might be overflowing on the top. Here's what to do with that camera. Let's select our Hero camera. Then we'll go and set overflow to hidden. That'll chop off anything that extends outside beyond the boundaries of the Hero camera. And let's select our Hero image or original Hero image and set it to display none. So here's our Hero section right now. Let's go into preview mode. And just like that, we've created a pretty impressive, basic interaction. So how do we make it better?
Well, we can stack multiple actions in an interaction. So let's go back to interactions. We're going to open up page load. Let's open up our Hero page load, our timed animation we just made. And let's add a second one. Now, before we add any timed interaction, the element we want moving or rotating or changing opacity. When we want to add an animation on something, we have to select the item. We have to select the element that we want to change. So right now we can't actually add an action. You have to select an element to enable more actions. So let's do that. Let's select our Hero image grid. We know right now, over five seconds, it rotates 26 degrees about the x-axis and 9.5 degrees about the z-axis. Let's do more. Let's add an opacity interaction. So we can change opacity. So right now it's by default 100%. We could it go invisible as it rotates. Again, by default it's over 0.5 seconds. Let's change that to five seconds as well and press play.
The end result is empty. Let's fix that. Let's reverse this. So if we want to start at 100%, let's create an action. Above here, if we actually go above the zero seconds frame, there's this little spot up here we can press and do opacity. And what this is doing is it's pushing down everything else. It pushed down the other actions. And we can actually toggle with this little switch here called set as initial state. What initial state does is exactly that it sets the initial opacity. In this case, opacity because we have the opacity action added. Let's turn that on. Then we can say, we want the initial state to be 0%. So it's going to be completely transparent when it first loads. Then at zero seconds, it's going to start an animation in which it rotates. We know that over five seconds, the same thing's going to happen with our second action. We'll increase that opacity to 100%. So let's recap. What do we expect when we press play?
We know it's going to start at 0% opacity, and then it's going to rotate and transition to 100% opacity. Both of these happen over five seconds. So let's press play. And it's performing exactly as we'd expect. If we go into preview mode, we can see our interaction even as we resize. We can see that interaction play out right on the canvas. Now, what does this look like on smaller devices?
So let's check Tablet. Let's press play. It looks okay here, but the problem is we've set a height on this Hero camera of 500px. Let's go back and change that height on Tablet, maybe 300px. Let's try that out in preview mode. That looks a lot better. Let's check responsiveness and fluidity. We're switching here, of course, to Desktop. In fact, we may want to go back to Desktop and change that to let's say 450, but another thing to note, and this is an advanced technique, is we can set the height of this camera, this Hero camera to be a function of the width of our viewport. So for instance, if we want our height to be set based on the width of this, we can use, let's say 10vw, just as a starting point. That's not enough. Let's increase that. Let's eyeball this maybe 30, 35vw.
Now, as we change the width, you can see these things responding proportionally. Again, that's because the height is now a function of the width. On Tablet, we can actually remove this height. So it should scale proportionally there as well. We can take this even further. If we want to go back. Since this is a grid and our grid gaps are currently set on the Hero image grid, we can go in to edit that grid and we can change these boundaries, this gap, which is currently set to 41px. We can set it to let's say 1vw on the column width. Let's approximate that it looks like 3vw is pretty good. We can set the rows to also respect the width, 3vw. That's pretty close. So it'll keep the proportions even. So if we press done and we go to preview mode, we should be able to resize this. And it should scale proportionally through all of our breakpoints. And it does but that's our first interaction. That's our page load interaction.
Let's take it even further with our next interaction. We're going to do it on a lot of these same elements. So the interaction right now occurs inside the Hero camera. We rotate our Hero image grid. Again, it starts at 0% opacity and it rotates and comes up to 100% opacity over five seconds. We're going to do something with the individual images. And we'll do this in two sets. Now, each of these images, as you'll remember has the same class applied, Hero image. We're going to apply a slightly different class to the bottom one. So we'll keep Hero image and we'll add a combo class called bottom. And we'll add that to each of these. Bottom as well here and finally to the third one bottom. And we're doing this for a specific reason.
Let's select any of our top images and we'll go over to interactions and we're going to add another one. This is also going to be a trigger on the page, but we're going to add an interaction while the page is scrolling to press that. And when it's scrolling on scroll, we're going to perform an action. We're going to play a scroll animation. And we have no scroll animations built in our project yet. So we'll add a new one right here. And since this interaction occurs on the page, we get to select the element or the elements which respond to this animation. So with any of our top Hero images selected, we're going to add a scroll action. We're going to move this.
So as we scroll through the page, 0%, that means when we're at the top of the page. 100%, that means we're at the bottom of the page. Let's demonstrate that. 0% let's say we don't want these moving at all. Let's add the number zero. So the left and right, the x-axis we're not going to move it to the left or the right. When is at the top of the page, we want its position to be zero. That's right where we see it on page load by default. But if that's 0%, what happens if we change the position at 100%? Well, at 100%, this Hero image, let's try moving it to the left. So just left 97px. That's okay for now. Actually let's pull it up to 500px, even off the screen right now. Turn on live preview. And when we scroll, the image moves to the left. When we scroll back up, the image moves back to its original position.
In fact, if we preview we can see the animation still occurs, our timed animation. But notice how this top image is moving to the left as we scroll down. Let's do it to more of them. Back at a preview or still in interactions notice how this affects the selected element. It says you're now only affecting the selected element. Okay. Got it. Let's change that to the class. Now, anything that has the Hero image class will be affected. Let's go to preview mode, take a look at this. And as we scroll down, you can see everything's moving to the left. Scroll back up, everything's moving back. That looks okay for one of the rows. Let's change the bottom row. And the way we're doing this here, because we added this combo class, this Hero image bottom, let's go back to interactions. We'll use the page scroll, go to our scroll animation. By the way, now is a good time. Let's name it Hero scroll animation. And with this one selected, with any of our bottom elements selected. Let's add another 0% and another 100%. Let's add a move.
Again, this one's going to zero out. So when it starts, it's not moving at all from its X position from its left right position. And at 100%, we'll add one more. This will be a move. We want this one to move 500px to the right. Now it's kind of buried underneath these two that's okay, because we're going to affect not the selected element, but the class. And that will affect Hero image bottom. Let's go into preview. We can see the page load animation, but we can also scroll at any time and see our continuous animation. See our scroll based animation. Track our position on the page. Now, one more thing to think about. Let's leave our preview mode and we'll press save on our Hero scroll animation.
This is smoothing. Smoothing is damping. It's controlling how quickly an animation catches up to our actual scroll position. So if we set this to 0%, let's set it to zero. As we scroll, we can see that left and right motion, very aggressively following our scroll position. Without any delay, it's following our scroll position on the page. But when we increase smoothing, let's say, let's bring this up to 85%. Let's preview again. Notice just how when we scroll, if we do it slowly, it looks real time but as we actually scroll like this, you can see it's delaying a little bit. In fact, let's emphasize that more. Let's switch it to 95% and we'll go to preview.
We can see as we scroll, it takes a second to catch up. Why would we do that? Why would we choose something other than zero? Well, a lot of times we'll use a scroll wheel on a mouse. And when we scroll up and down, you can still see that animation occur as opposed to if we go back and we change this to 0%, it might not be a noticeable animation when we scroll on a scroll wheel. It's a little bit jumpy. So smoothing again, this increases the damping. 50% is the default. It might look good at 50%. Let's leave that at 50. And as we use a scroll wheel, we can see that animation. Maybe soften it a little bit. Let's do 80%. And now when we use a scroll wheel, that looks okay, we can see the animation. If we use the track pad, we can see it responds right as we scroll. It looks smooth. We're getting that 3D tilt effect again because our section is a camera. Let's check it on other breakpoints.
We're scrolling down and see that rotation is a little more dramatic on a smaller breakpoint. Let's go down to this one as we scroll. It's pretty good. We can always use viewport units. We could use viewport units on the animation itself. If we wanted to control it a little more proportionally to the width of the viewport, back to the base breakpoint, toggle preview, we can see it comes in slowly over five seconds. A nice subtle interaction. And when we scroll, we have that subtle move on the top row to the left and the bottom row to the right. It's very subtle, but sometimes the best interactions are. For instance, did you notice the pen that's been hovering here for the entire lesson? It might look like a visual effect, but then could we interact with it?
Sometimes playing with someone's expectation of an interaction is just as exhilarating or maybe just as effective as something that's 100% in your face and obvious. In other words, are interactions there to add value and delight, or are they just there to flex a muscle that says, "I know how to use interactions." Sometimes it's both and that's okay, but a little subtlety can go a long way.
Let's move on to our final interaction. And for this one, we're going to be effecting our selected projects. Again, this is on the homepage. And each of these selected projects as a refresher is made up of let's rename some of these to keep organized. We have this collection list, let's call this selected projects list. And we have a collection list wrapper that contains all of them. We're going to be working inside of this collection list. In fact, we'll be working on the image itself. Again, to keep things organized, let's call this project image, selected projects image, and we're going to duplicate it. Remember a change to any one collection item affects all the others. So let's right click and duplicate this image. So now each of our collection items is made up of three parts of the grid.
We have the project details, the selected projects image, and the next selected projects image. Let's remove the class because we're going to do some new styling to this. So let's remove. Let's go and click remove class. So now there's nothing on this image in terms of styling, it's just sitting inside a grid. So let's make sure it's position is set to absolute. And right now it blows out of proportion. That's okay. We're going to fix that because an absolute child, a child element that's set to absolute position, it's looking up the hierarchy. So right now its parent is collection item. It's looking for the first parent item it can find that set to anything other than static. In straightforward terms, that means we have to set its parent, its collection item to something other than static. Let's set it to relative positioning.
And just like that, our image is spanning across all of this right now. We're going to change it. First off let's name it, let's call it selected projects effect. And we're going to do a few things here. First off, because we've enabled absolute positioning, we can set z-index to a negative value. Let's do negative one. So now it's behind that. But the other thing to note is that it's also being sized in its original proportions. Let's have it span the full proportions of this by setting its width to 100% and its height to 100%. So now it's behind the selected projects. Now it's behind each of these collection items. Why are we doing this?
Well, want to add a blurred shadow effect. So now with the selected projects effect selected, we can go back to filters. Let's add a filter to blur. Then we can instantly see we have this blur effect behind it. Let's set it to about 40px. Let's also increase our saturation. We're going to add a second filter to increase saturation. And 0% is black and white, 200% is really upping that saturation. And let's add a transform to move this. Let's move it down a little bit. So we have that glow effect a little bit underneath. Now, if we preview like this, we can see the effect. It's behind each collection item. Let's click out, we're turning this into an interaction.
So we want to interact with the collection item itself. Let's go to interactions, make sure our collection item is selected. And when we do this, this will be an element trigger. So when we hover over, when the mouse hovers over this element, when it hovers over the collection item, we want to start an action. Let's start an animation. And we're going to add a new one here. And this animation is going to have two different steps, two actions. It'll have an initial state and it'll have a hovered state. So let's do both of those. Let's create one.
Now, if we start styling, if we create an action right here and let's say effect opacity, notice how it's going to change the opacity of the entire element. We don't want that. In fact, let's delete that. Because this timed animation, which we can name, selected projects hover, because this timed animation affects the collection item, but we can animate any of these elements. Let's widen this, we want to select our selected projects effect and we want to make sure its opacity is set to 0%. So let's go down, change its opacity to 0%. Now we can't see it. That's what we want as the initial state, when the page loads. So let's turn on set as initial state. But when we hover, we want to see that glow. So we're going to add a new action where the opacity goes up to 100%. Again, if we wanted it at 50%, we could set it at 50. If we want it at 100%, 100%. Let's set it at 100% for now. By default, it's over 0.5 seconds. That's okay. It's linear.
Let's press play and see what that looks like. Maybe speed that up a little bit. Let's say 0.2 seconds. That looks okay. Let's add a nice ease. So that'll be on hover. So if we go to the preview mode by default, it's going to have 0% opacity. When we hover over, it will have 100%. Now, if we hover out, nothing happens. We're going to fix that in a second, but let's demonstrate that we can do this on the second one as well. Then of course, the third one, we get the picture. Let's go out of preview mode, scroll back up because this is the one we're effecting. Let's press save because we need to add one more thing. On hover out, we want to start an animation. And in this case we have the selected projects hover. We have that already created. So let's duplicate it and we can do that right here. We have selected projects hover two, let's select that one. So on hover, we want the hover. On hover out we're going to click this one. Let's rename this selected projects out.
Now remember on the first one, we had two actions. It still has two actions because we duplicated it. We'll delete the initial state. Let's remove that one. We only have one action left. Again, 0.2 seconds it'll ease. We're going to take this down to zero because when we hover out, we want that glow to go down to zero. Let's save our changes and let's preview. So again, just as we expected, 0%, we can not see the glow when it's not hovered. And when we hover into the boundary, we see the glow. What happens when we hover out? Glow disappears. Hover out, hover out. Trying it on the second one, hover out, hover out. Now has anyone else noticed, this is not a clickable link. We want, anytime someone clicks this left side, this view project side, we want it to be a clickable link that takes us to that selected project.
So let's just go in and select our project details. This is a Div block and we can right click. To make it easy, we can right click on the label and we can press it convert to link block. Now we didn't see any visible change, but we can always go into our element settings with that link block now selected. Then we can have it take website visitors to any page. In fact, we want it going to current project. That means when we go into preview mode and we press view project on anywhere inside this pane, it will take us to the architectural website. That's exactly what we want. Let's go out of preview mode. Let's go back to home. And it's behaving exactly as we expect.
Now, if we don't want to see the hover when we're previewing, we can always go in and select that selected projects effect. And we can go in on the Style panel and change its opacity to 0%. Remember we said in initial state, we set the interaction so we'll override that when we go to preview, it'll still be empty, hover, we can see it, hover out, we can't. Sometimes hover effects are not what we're looking for on Tablet or Mobile landscape or Mobile portrait. We can at any time, let's go back to the base breakpoint. We can at any time go into that interaction. Let's make sure our collection item is selected and we can go into that mouse hover and change. So maybe we only want it on Desktop and above. Let's uncheck Tablet, phone landscape and phone portrait.
And now it'll work on Desktop, but on Tablet, Mobile landscape or Mobile portrait but that's it. Three different interactions, three different triggers that each result in a different kind of animation. We have our timed animation, which occurs on page load. We have our continuous animation where the position of the images shift as we scroll up and down the page. And we have our glow animation, which responds on mouse hover. Hover in and hover out. There's a lot coming up. More interactions. And we're about to shift into advanced mode as we'll design or redesign huge parts of our site, including a branded 404 page, password page. We'll do an accessibility audit, a design review with Sana, Google Analytics, and so much more. But first-
[Grímur] About a year ago, McGuire did a digital scan of my bus. Bus. And I've been digitally enhanced ever since. Ever since. Share your work. Share it with me. Share it on social media. Art. Best of Grimur. Design. Obey my 3D likeness. Cinema 4D.
