Build Along to Create a Scroll Effect with Spinning and Changing Elements

Hey there, fellow design enthusiasts! Are you ready to take your web design skills to the next level? Today, we're diving into a super cool project that you can build along with. If you've ever wanted to create a dynamic visual effect where elements spin and change as you scroll, you're in luck. I'll walk you through the process using Wix Studio, so grab your digital toolbox, and let's get started!

Setting the Stage

First things first, let's set up a nice big canvas to work on. You'll want to make sure there's plenty of space to let your creativity soar. Let's say, oh... around 3000 pixels in height should do the trick. With this generous space, your elements have room to move and groove as the page scrolls.

Bringing in the Imagery

Next, drag your chosen image onto the canvas. In our example, we're using a cool globe wireframe image that gives off a slick modern vibe. Once you've got it in place, you might notice the image appears a bit cropped. No worries! Just reset the image to break free from any pesky aspect ratio constraints of the previous template.

Align, Duplicate, and Dance

Position your image to the bottom left of the canvas, so it sneaks out a little bit. Then, duplicate the image and shimmy it on over to the bottom right. Make sure they are aligned horizontally. Think of them as two synchronized dancers on each side of your screen, waiting for the music to start. Adjust the spacing so they're almost touching—like they’re getting ready for a cool duet!

Adding the Spin

Alright, time to put these spheres in motion! Select the left sphere and add a scroll animation. The idea is to have them end up just touching, so select the "Move" effect and adjust it. You’ll want to set the angle to 270 degrees and the distance to 100vh. Repeat this process for the right sphere but set the angle to 90 degrees. With that done, give it a scroll; it looks pretty neat!

Take it Up a Notch: Spin and Grow

This is where the magic happens. Select the whole stack of images and add another scroll animation—this time, choose "Spin". Don't be shy! You might want to make them start smaller and grow as they spin. Set the scale to 50% and ensure the animation covers the whole scrolling area. Have a scroll to see it in action—it’s getting there, but we can do even more!

Double Trouble: Duplicate and Change

Now, you're going to duplicate that stack of images to add some more engaging effects. Make sure you align them perfectly over each other. Switch the images on the new stack with different ones (make sure they're the same size!). When your spheres collide, we want it to be a visual experience, right?

Let the Fade Begin

Put the new stack into a container and make sure that's selected. Then, add a fade animation. The aim is for the new images to appear exactly as the spheres meet. A quick appearance, fading in from opacity 0 and setting the animation area to start at 49 and end at 50. Trust me; this gives a delightful pop!

Adding a Background Transition

To make things even cooler, add a shape, change it to a square, and resize it to cover the full width and height of your scroll section. This will act as a background color or effect that emerges at the right moment. Make sure this is tucked behind your other elements.

Now, select the container with the fade animation, and add a scroll-triggered fade animation to the shape. Another quick one from 49 to 50—you’re going to love how it all comes together!

Time for the Grand Reveal

With everything set up just and right, give it a scroll up and down. Seriously, how cool is that? The spheres spinning and changing upon meeting is not just visually striking but also intriguing for users as they explore your design.

Join the NewForm Community!

If you loved building this and want to continue to level up your skills, head over to NewForm. At NewForm, we’re all about honing your design skills and connecting you with like-minded design aficionados. Join us for monthly web design challenges with cash prizes, and immerse yourself in weekly skill-building events. Get exclusive access to monthly guest sessions featuring top professionals in web design.

Ready to take your skills to new heights? Join the NewForm community today and unleash your creative potential!

And that's a wrap, folks! Thanks for following along. Until next time, keep designing and making magic online. ✨