How To Create a Stagger Scroll Reveal Animation

In this tutorial, Luke from Motion.page demonstrates how to achieve a subtle and appealing image stagger effect as users scroll down a webpage. This effect causes images to fade in and scale up in a staggered manner, enhancing the user experience. The tutorial is executed using Oxygen Builder and Motion.page.

Introduction

This tutorial focuses on creating a simple yet visually appealing scroll-triggered staggered image animation in Oxygen Builder. The effect involves images fading in and scaling up as the user scrolls down the page.

Steps

  1. Preparing the Page in Oxygen Builder:
    • Start with a basic page layout in Oxygen Builder, including a section specifically for the animation.
    • Add a wrapper div with multiple images inside it, which will be the focus of the animation.
  2. Applying a Class to the Parent Element:
    • Assign a class (e.g., 'MP stagger image') to the parent element of the images.
    • This class will be used to target the images in Motion Page.
  3. Setting Up the Animation in Motion Page:
    • Open Motion Page and create a new timeline named 'image stagger'.
    • Set up a scroll trigger and use the class 'MP stagger image' to target every image inside the parent element.
  4. Configuring the Animation Properties:
    • Set the initial opacity of the images to zero and scale them to 0.8 (smaller size).
    • Configure the animation to return to full opacity and scale back to 1 as the user scrolls.
    • Apply a stagger effect to the animation, with a total duration of one second.
  5. Adjusting Animation Speed and Easing:
    • Modify the stagger duration to control the speed of the animation.
    • Change the easing to 'elastic' for a more dynamic effect.
  6. Testing and Finalizing:
    • Save the changes and preview the animation on the front end.
    • Ensure that the images fade in and scale up smoothly as the page is scrolled.

Conclusion

This tutorial provides a quick and easy method to create a scroll-triggered staggered image animation in Oxygen Builder. The effect is subtle yet effective, enhancing the visual appeal of the webpage. The tutorial is ideal for users looking to add dynamic elements to their website without complex animations.

Video transcript

View full
Hide

Hello everyone, Luke here with Motion Page. I'm back with another tutorial. Today's tutorial is going to be very quick. It's just a very simple effect, which looks like this.

In the next section here, we have some images, and when you scroll down, this is what it kind of looks like. This is locked to the scrollbar, as you can see. When we go up, it reverses the animation. But these elements, they have these names attached. This is not using Motion Page, by the way, but I will show you how to do that. It's just a very simple effect, looks nice, and it's very subtle.

Now, if you can imagine, we have the same animations applied to the logos, and we have animations applied to the text as well. This page could look very nice. So, I'm going to show you how I did this using Oxygen Builder.

I've already set up my page in Oxygen, and I'll just show you what it looks like: stagger image edit with Oxygen. It's a very basic page. First, I've just got some FAQs, and as I go down, this is going to be our focus element here. What this is, is just a wrapper with a lot of images inside of it. These elements are actual images. We have a logo section, a basic CTA, and a footer.

So, what I'm going to do is, on this parent element, I'm just going to apply a class that we can use to target in Motion Page. We're going to use this class in the selector, and then we'll target every image inside of it. Let's just do something like this: "MP stagger image". It's just a class that's easy for me to remember. I've applied that to the parent, as you can see. That's basically it. I'm just going to save this now.

I'm going to open up Motion Page over here. We're going to create a new timeline, and for this, I'm just going to call it "image stagger" as time gets the page that we made here. All we need to do now, very simple, is we'll just change this to scroll trigger lock display. Turn this down to around 0.2 seconds. I'm going to leave these as default for now. I'm just going to use a selector here. The selector I'm going to use is "MP stagger image", which was the class that we just created. Then, I want to target every image element that's inside of that. So, we'll just do this and we'll do "image" like this.

This is going to target every single image. You can see it's highlighting the first instance of the selector. But if I just play around with some properties here, from opacity zero, and then also, we'll scale it up as it loads in. So, from 0.8 something like that. And also, what I'm going to do on the "to" here, I want to do stagger, and I want to stagger the total amount of one second. Now, because I'm editing this on the "to", I also need to put these properties back to their defaults. So, we want it to come to one opacity, and then the scale also needs to go back to one. As you can see, when we play around with this little slider, it's staggering in quite nicely.

It might be a little bit fast. So, all you need to do if it is too fast, just play around with this number. You could even do each element one second. That will take a very long time, by the way. So, if we change that to 0.1, I want to lock this to the scrollbar. So, how this is going to work is, when you scroll, it's gonna fade in. It's gonna stagger in as you scroll down. But I'm going to put this back to amount, and I want to do 0.5, something like that. I'll save this.

I do want to change one more thing, which is the ease. I want to put this to elastic because it just gives it a nice animation effect, as you can see. So, we'll save this. I've just saved it, and let's have a look at it on the front end. Here, I'm going to use the scrollbar because my scroll wheel on my mouse is a little bit broken. So, you can see, we're scrolling down. That was pretty good, actually. Because it's locked to the scrollbar, you can see it reverses as we go up as well. So, it's just a very nice, simple, quick effect that you can use.

You'll also notice here that I have some names coming up underneath. This is just using a third party, and I will link that in the description for you. But in Oxygen Builder, all I've done is used tpjs. This is a JavaScript library, and in here, I've just added some scripts and some JavaScript. The way this works is, if I click on one of the images in Oxygen, at least on the attributes, you just use these properties: "data TP content". This is the name that you want to display, and then you can also use "placement" so it comes up at the bottom of the element when you hover over it. It does come with some nice things. You can change the colors of it and stuff like that. So, as you can see, it's coming up underneath the element there.

That's it. I just thought I'd show you a very nice, simple effect today. Nothing too long, nothing too special. But I think in the next video tutorial, we can move to something a little bit more advanced. Because I think the tutorials at the moment have been pretty simple. From next week, I think we will transition to something more complex, and maybe even design a full page. So, if that sounds good, then make sure you check in next week.

So, there you have it, guys. Please don't forget to give this video a thumbs up, a like, and please do consider subscribing. And like I said before, next week, I think we will be making a little bit more complex animations. So, if that sounds good, then be sure to come back next Monday. I'll see you next time. Thank you very much.

I hope this helps! Let me know if you need any further adjustments.

100 %