How can I do page sweeping animation?

[DeDX]

Hello!
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

[Carl]

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.

[DeDX]

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.