Lottie logo animation slide to reveal hero

Support
#1

Hi team,

I’m working on upskilling my animations and am wondering the best way to achieve the following:

When you go to the website, I want the lottie logo animation I created to play. Once that plays I want it to slide away to reveal the hero section of the website (and nav bar). What is the best way to achieve this?

An obvious way is with a slider, but I don’t think it can give me the effect I want. I want the animation to play (it’s 5 seconds) and then for it to slide away to reveal the hero. With a slider, you have to either click the pagination to move it away, or it’s on autoplay and loops…but I don’t want it to loop.

Can you please advise the best way to go about this, whether with a slider or another way to achieve this? Or if you can’t, can you at least point me in the right direction of what sort of tutorials I should be searching for. Keeping in mind that I’ve already created and loaded the lottie animation into the site.

Note the page I’m working on is currently named “untitled”

Thanks,
Ashley

#2

Update. I think I’m getting close. I’ve started working on it as a header rather than a section on the page (note this will be a one page website). And I updated the Lottie animation so that it has a white background that slides out to transparency. But now I have new problems:

  1. I figured out how to stack the lottie animation over the hero grid. But I can’t figure out how to get it to work responsively so that it’s covering the hero grid at all stages within a given screen size range (ie. XL it covers it most of the time unless it’s huge or goes down to a square). I tried resizing my lottie animation a few different way, but it still didn’t work. I thought I could setup the grid with the opacity effect so that it appears as the animation ends, but this doesn’t work as it is a gradual fade and not an abrupt one. How would you go about solving this problem?

  2. I have the lottie animation in a div that is set to absolute. this gave me the layered reveal effect, but because it’s on top of my grid, I can’t click my buttons contained within the grid.

I guess this brings me back to my original question…what is the best way to set this up? What structure would you recommend? I’m not asking for custom development, I’m trying to learn, so please help me learn.

Thank you,
Ashley

Ps. This is similar to what i’m wanting to do. I want my lottie animation to play and then slide out revealing my home page - https://www.youtube.com/watch?v=CQ0NYltZkfk&t

#3

Hi Ashley,

Thanks for reaching out.
What I have understood is that you want to show the Hero image or slide after the completion of the Lottie animation. If that is correct, you need to trap the ending event of the lottie animation to start the next operation.

Alternatively you can try the Revolution Slider with similar operation, without lottie.

Thanks

#4

Thanks Tristup! Can you please give me some more insight into what you mean “trap the ending event.” I’ve done some googling, but I can’t find anything to help me. Can you please give me a bit more information/direction? Thank you!

#5

Hi Ashley,

I just wanted to say that you need to check if the animation is completed or not. If completed, you need to start the hero slider.

Thanks

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.