Jump to content


How can I do page sweeping animation?

Go to solution Solved by Carl,

Recommended Posts

I'm new to gsap and I'm trying to implement this animation in my project. Is there any simpler way to do this?
What I'm thinking is to make a function which makes current screen to negative transformX and reveal the image viewer under it. I'm finding it hard to implement those colored bars which follow the transition from right to left.

Here's the video: https://we.tl/t-pjHc3wYqcU

Link to comment
Share on other sites

  • Solution

Hi and welcome to the forums,


For something like this I think the trick is to NOT think of them as individual bars but more like stacked full screen elements that just animate left at different rates. You don't control the width of anything, just the x value.


See the Pen mdpMwWY?editors=1010 by snorkltv (@snorkltv) on CodePen


In this example I'm doing a stagger on the top image and 3 colored full screen divs underneath it.

You can get drastically different results by changing

  • duration of animation
  • ease of animation
  • stagger: each
  • stagger: ease

I set up GSDevTools for you so you can scrub through and explore the timing.


If you are just starting out, you can take my complete GSAP beginner's course for free it has videos on staggers and the advanced stagger properties used in this demo.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

First of all thank you for answering. I did what you suggested and it works great! I've been working with GSAP recently and really loved hanging around in the forums, everyone is so helpful around here. Looking forward to creating great animations.


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.