Jump to content


Website frame system

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



i would like to create a website with a frame system like this https://cuberto.com/


I like a lot the animation, can you give me a hint, how can i create a website similar to the example above? Thanks!

Link to comment
Share on other sites

Hard to tell how you can build entire website, following are some of the threads with similar ideas or animation. It is just a lot of tiny steps and then putting them all together.






  • Like 6
Link to comment
Share on other sites

Thank you Sahil,


regarding https://cuberto.com/ im only interested in that swipe effect, when you scroll the banner comes from left and then stop when it reaches its half. Thats what i want to create. Thanks!

Link to comment
Share on other sites

Here is simple example. Trick is to animate scaleX so element looks like it transitions out and new element comes from left and changing transform origin of your element. Also animating scale instead of width gives you far better performance.


See the Pen ELwZOb?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 6
  • Thanks 1
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.