Awesome Scroll-Activated Animated Gallery - Quick Tut

Key Takeaways

I recently stumbled upon this scroll-based thumbnail animation on dribble and I thought to myself wow that's rather Nifty so we're going to see what it takes to recreate this effect and here is ours so let's go ahead and break it down the weapons of choice for this particular effect are going to be HTML and CSS along with the green sock animation platform and of course good old JavaScript now also note the full code source is available on codepen and the link is in the YouTube description first let's tackle the HTML markup for these cards we're going to need an overall card container to hold our image and description for the thumbnail itself we'll need two HTML elements one will be nested inside the other and you'll see how they'll work together to structure the card properly for the effect and finally we have a paragraph at the bottom for the CSS we're only going to focus on the image container the image container itself only needs two properties which is positioned relative and a height the relative Position will allow the nest to thumb down inside of it to keep the correct position then the image thumbnail itself is positioned absolute this allows us to apply Transformations onto the thumbnail without affecting the other HTML elements the background size is also larger at 100 70 percent we'll animate that back down to 100 with green sock and also not shown here as the actual background image URL so you'll want to include that as well now for the JavaScript we'll first want to include both gsap and the gsap scroll trigger plugin this will allow us to trigger our animations based on scroll now let's also get a reference to all of our cards through document.query selector all and then we'll create a new timeline with the scroll trigger settings the trigger property is targeting a class called work that surrounds our cards and this is our scroll trigger reference point the start and end values instruct the scroll trigger when to start and end our animations and finally sending scrub to one makes the animations dependent on scroll location as opposed to time itself underneath that code block we're going to iterate over each of our cards now because I want the rotation and position of each of the card to be random we'll use math.floor in random to set a positive and negative range of random numbers next we're going to use the from method on our timeline and Target each image we set the rotation X and Y position to random values that we specified above and we also set a negative one so that the cards will all animate in at the same time we then chain another method setting the background size back to 100 from the initial 170 percent value we set in CSS and here's the final result I think it's pretty awesome and again the full code is available at codepen if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy