Here’s a dynamic, spinning section where the elements change as you scroll. I’ll show you how to recreate it on Studio—feel free to build along.
Okay, to start things off let’s give our section a huge height so there’s room to scroll—say, 3000 pixels on canvas.
I’ll drag an image onto the canvas.
And change it to an image I uploaded earlier. .
For this design I’ll go with this globe wireframe image that I uploaded earlier.
When I change the image, its cropped because the bounding box keeps the aspect ratio of the previous image. So let’s reset it.
Then drag to resize and place it to the bottom left so it overflows a bit, like this.
Duplicate it, then we’ll move this one to the bottom right.
Get them aligned, now we’ll select both images and stack them horizontally.
I’ll drag this handle to adjust the spacing until the spheres are just about touching.
And align these both horizontally and vertically.
Hang on…I’ll scroll down to find them again…there.
Okay. Next I’ll select the left sphere and add a scroll animation.
Let’s leave the animation path as “To its design,” so the animation ends with the spheres touching. Pick the Move effect.
We’ll adjust it—set the angle to 270…and the distance to 100vh.
Same thing again for the sphere on the right.
Add a scroll animation…we want Move.
For this one, the image moves in from the other direction, so we’ll set the angle at 90 degrees. And again the distance—100vh.
There we go. Let’s take a quick look.
It’s pretty cool…but let’s dial it up a bit and have them spinning as they collide.
We’ll go back to edit. Select the Stack itself. Now we’re going to add a scroll animation, and choose Spin.
I won’t change the direction and spin count. But maybe we want them to start smaller and grow as they spin—so let’s set the scale to 50%...
…and have the animation area go all the way to 100 so it plays the whole time we scroll.
I’ll just scroll up and down on the canvas to see how this looks. [pause] Yeah, that’s better. But am I happy yet? Not quite.
Let’s really emphasize the point where they meet. Select this Stack again, and duplicate it.
And we’ll align them the same way so they’re right on top of each other.
We’ll select the left image and change it.
I’ll pick this one, sphere 2.
And do the same on the right side. Whichever images you use here, just make sure they’re the same size as the ones underneath.
Alright. I’ll select the new Stack, and place it in a container.
Make sure the container is selected.Then we’ll add another scroll animation.
This time, we want Fade. Let’s adjust it.
What we’re going for here is to have the planet images show up exactly as these two spheres touch. It should happen really quickly. Let’s keep the opacity at zero. And set the animation area to start at 49 and end at 50.
Okay. Almost done. We’ll come over here and add a shape. Then change it to a square.
Then go into the settings, and turn off this toggle so we can resize the shape however we want.
We’ll drag to resize…oops…I need to come over and unlock the aspect ratio…and we’ll drag this so it’s the full width and height of the section.
And in the Layers panel I’ll reorder this so it’s behind all the other elements. This square is sort of acting as our background color.
Next we’ll select this container that we added the fade animation to earlier, and add another scroll animation.
This time the container is the trigger element—scrolling to it gets the background to appear. So we’ll change the animated element to the basic shape. And we’ll pick the Fade animation.
Adjust it to be really quick again, with the animation area from 49 to 50. Great, it’s all set up.
Time for a preview…There we go, we’ve got our globes that change when they collide.
Thanks for watching. Check out more tutorials like this on the Wix Studio Academy.
