Mapping a Great Animation Effect in JS + CSS (film, 7 minutes)
In the latest video by Hyperplexed, Camille Mormel reveals the intricacies of creating an interactive slider. He started by setting limits for his code: 10 lines of HTML, 20 lines of CSS, and 30 lines of JavaScript, which is quite a challenge. Camille aimed to focus on creating a simple project where images could slide left and right. His approach was straightforward; he began with the body style and a structure for the images to ensure everything was organized and adequately spaced. After testing the initial elements, he managed to create a visually appealing layout using CSS that only took 14 out of the 20 line limit.
Camille slowly introduced more features, from panning to precise image shifting. He noted that the images moved at different speeds compared to the track, which was an interesting challenge. He pointed out that the key to this effect was effectively tracking mouse movement and calculating the distance travelled by the cursor. He managed to eliminate the ambiguity concerning the direction by determining the accuracy of his slider’s operation. Interestingly, throughout this process, he discovered that his "invisible slider" could be effectively aided by mathematical calculations, allowing for better control of the image track’s movement.
As he moved forward, he addressed issues with default interactive element behaviors that needed correction. He introduced several tweaks to avoid problems related to resetting the slider's position. Camille suggested creating a new value that keeps track of the percentage progress, allowing users to continue sliding from where they last left off. His step-by-step explanation highlighted how to maintain perfect interaction with users, which is crucial in UX design.
Once the slider functioned properly, Camille focused on adding a parallax effect to his project. The scrolling idea, which uses changes in position independent of slider movement, added an extra detail to his project. Consequently, the images could move more smoothly. Camille opted to include animations to make the overall experience more aesthetic and in line with modern stylistic standards. At this stage, movement became incredibly fluid, which had been his goal from the beginning. It's worth noting that at the time of writing this article, the video on Hyperplexed had reached 2,025,239 views and nearly 95,000 likes, reflecting the channel's growing popularity and the quality of its engaging content.
Toggle timeline summary
-
Introduction to Camille Mormel's skills and the competition challenge.
-
Setting limits on the coding challenge: 10 lines of HTML, 20 lines of CSS, 30 lines of JavaScript.
-
Beginning the coding by defining the structure of the webpage.
-
Inserting images into the layout using Unsplash.
-
Adjusting image dimensions and center alignment.
-
Using CSS Flexbox to arrange images side by side.
-
Adjusting the panning feature for smooth movement.
-
Explaining the mouse movement interaction for dragging.
-
Using mouse position to control the image track movement.
-
Listening for mouse down events to track the starting position.
-
Implementing mouse move listener to calculate movement.
-
Explaining how to manipulate the track based on mouse movement.
-
Calculating percentage movement for the slider.
-
Resolving issues with the movement before the mouse is pressed.
-
Fixing default image dragging issue by setting draggable to false.
-
Updating the stored percentage for seamless dragging.
-
Implementing limits on the slider movement to prevent overflow.
-
Adding a parallax effect to the images for better visual appeal.
-
Animating image movement for a smoother user experience.
-
Concluding the coding process with a friendly jab at Camille.
-
Expressing appreciation for Camille's inspiration.
Transcription
Camille Mormel, you've gotta be kidding me. You're too good at this. I just don't know how you possibly expect us regular people to compete. Like I just can't explain to you guys how smooth this movement is unless you actually go to this site and try it. It's insane. All right, I'm setting some limits so this doesn't go on too long. 10 lines of HTML, 20 lines of CSS, 30 lines of JavaScript. Let's see how far we can get. We'll start with the body, easy. 100% this way, 100% that way. Black, no scroll bars. Seven out of 20 lines used. These images gotta be contained in something. Let's call it a track. Unsplash.com, copy, paste, repeat seven more times. 10 out of 10 lines used. We're done here. Let's fix these images. Give them a width, give them a height, fix the aspect ratio, and center it. 14 out of 20 lines, yikes. Okay, gotta line them up side by side. Display flex, add some space between. Position absolute so I can set the left and top positions to halfway. Okay, left looks good but top doesn't. So let's shift things up just a smidge. Oh wow, that's crazy. I cannot believe I somehow managed to keep that at 20 lines or less. Great job, me. All right, let's make this thing work. I say we start with the panning feature, just making it move left to right. But wait, I can tell there's some trickiness going on here because the images are moving at a different rate of speed compared to the track as a whole. Noted. I don't know much at this point but the one thing I do know is that this effect is based on mouse movement. When I press my mouse down at any given point on the screen and then drag in the left-right direction, the entire track is moving. But how do I know how far or how fast? Let's see how far I have to drag to get from one end of the track to the other. Aha, so by the time the mouse is halfway across the screen, the track has moved 100% of its maximum distance. So it's almost like we can imagine there's a slider on the screen and dragging it back and forth controls our track. But this slider is extra fancy, not only because it's always following our mouse around waiting for us to click and drag, but because it's completely invisible as well. So how do we go about creating our magical invisible slider? Well, the very first step to this interaction is pressing our mouse down. So let's start by listening to any mouse down event that may occur. When that happens, I know I wanna keep track of the exact X position the mouse was at so we can use that as the starting point for our invisible slider. But where are we gonna store that value? What if we just created a new custom value on our track element that will update every time the mouse is pressed down? All right, what happens next? Step one was mouse down. Step two, the mouse moves. So we need a mouse move listener. We need a way to know how far our mouse has traveled relative to the starting point, as well as where the other end of our slider should be. The relative position is easy enough. Just subtract the current position from the starting point. And we already know the max distance is one half of the width of the window. So dividing the relative position by the max distance would convert this value to a decimal. And multiplying the decimal by 100 gives us a percentage. Oh, wait, my head hurts. Why were we even doing this again? Oh, right, because clicking and dragging halfway across the screen has to move our image track from one end all the way to the other. Only this functionality has to be possible no matter where we click on the screen. So by tracking the starting point and using it to create a virtual slider using math, we can thereby obtain the value we truly need, which is the percentage of our slider that has been slid. Now, if we recall earlier, we used the translate property to shift our slider up by 50% of its height. Well, thanks to this value here, we can perform a very similar manipulation in the left-right direction. For instance, if we set this value to negative 50%, our track moves 50% in the left direction. If we set it to negative 100%, our track has moved all the way to the opposite end. Fortunately, since we just spent all that time calculating the percentage value of our magic slider, the next step is easy. We simply use this value to set the left-right percentage on our track, and whoa, whoa, whoa, hang on. The mouse move listener has no way of knowing when the mouse is actually down, so the track is moving before it's supposed to. Well, since I know the mouse down at position is zero before the mouse is pressed, we could just say that if that's the case, return immediately and skip the code that's telling the track to move. But as soon as the user clicks, the value will no longer be zero, so we'll have to set it back to zero when they release the mouse. Uh, okay, so now when I click an image, it just drags it off the track. Aw, stupid default behavior. Fine, we'll just set draggable to false. Okay, no more weird dragging, but we're clearly going in the wrong direction here, so I guess we gotta flip the sign. All right, looking good here. Wait, why is the position resetting when I try to drag a second time? Are you kidding? Since we're not keeping track of how far we've dragged the slider, instead of continuing from where it was left off, it just resets back to zero. Fine, okay, so just like we stored the mouse down position with the track, we're gonna have to store the percentage there too, I'm guessing. That way we can take the current percentage slid and add it to the last percentage to get the new percentage. So we need to store this value every time they release the mouse, but how do we get that value from the mouse move listener? Okay, what if we constantly update the percentage here and then use it purely as a way to transfer the value between the two? Aha, there we go. Now when I click and drag a second time, it continues from where we left off rather than resetting back to the default position of zero. Boy, we really got off in the weeds again there. What the heck just happened? Right, so our click and drag was technically working, but only if it was the first time the user had ever moved the track. What we failed to account for was that the next time the user decides to click and drag, their progress wasn't stored anywhere, so the track had no way of knowing it should no longer start at zero. By constantly tracking the percentage and storing it when they release the mouse, we can use that value as the new starting point when determining the percentage the next time. Phew, okay, now our movement's solid, but I'm noticing our slider doesn't exactly have any limitations at the moment, as in I can keep dragging it infinitely in either direction. So I'm thinking we gotta take our next percentage value in combination with the min-max functions to set a maximum value of zero and a minimum value of negative 100. Wait, how many lines are we at? 24, not bad. What's left? Oh, right, that parallax effect with the images. Okay, so here's what I'm thinking. As of now, our images are positioned in the center, which technically we can split into a vertical center and a horizontal center. And really, these values are just a nickname for 50%. But what if we start this one at 100% and then use the exact same percentage value that we used for the track to slide the image positions from 100 down to zero? So all we have to do to implement this is loop over our images, replace the first value with next percentage, and since next percentage runs from zero to negative 100, we can just add 100 to it to correct the range. Okay, it's definitely working correctly, but it just doesn't quite have that buttery smooth feeling that Camille's did. So what if instead of updating the CSS directly, we gave them a little animation instead? Let's replace the style updates with the .animate function. We'll set the duration to 1200 and the fill to forwards so the animation is persisted rather than the default behavior of resetting after completion. All right, I think we've passed our last line limit, so we'd better stop there. Take that, Camille. Just kidding, you're awesome. Thank you for inspiring us.