Jump to content

Eugene Rayner

Mimicing an animation -> any help greatly appreciated

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, I am trying to mimic an animation -> the first scroll animation on this page https://www.box.com/

So far as you can see from my codepen I have mimic'd it (Kind of). I am looking for better ways/any extra help/tips and tricks anyone can give me.

Please go ahead and fork my codepen, and give it a go for yourself. I may have done it completely wrong, this is a learning experience for me.


Hope to see some comments in this discussion. It's a pretty hard animation to mimic.

Should I be using SVGs to mimic this animation?


Thanks :)

See the Pen WjdZXX by erayner (@erayner) on CodePen

Link to comment
Share on other sites

do you know how i can have the underneath background expand both ways instead of just expanding right? 

using skew now.




See the Pen qmxaqV by erayner (@erayner) on CodePen

Link to comment
Share on other sites

You can change the transform origin. So elements to left should scale from the right, elements to right, should scale from the left, and then your box should scale from the center.


See the Pen VbQmGY?editors=0110 by osublake (@osublake) on CodePen


  • Like 3
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.