Jump to content
Search Community

How can I achieve the same transition animation effect as seen in Scabal.com and epic.net

AbhishekSock test
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 am really blown away by the animation in Scabal and epic (developers of scabal.com.) I am trying to figure out the transition they have when you see on your first scroll. The way the columns get adjusted in a cool way is amazing.

I am a newbie front end developer and I am making my feet wet in animation. I've tried to achieve the same effect by using animate.css, AOS and AnimeJs but no luck so far but I am positive that I can use greensock to achieve similar effect.

I request someone to please let me know how can I do it. I am not looking for code but I am looking for a tutorial or any methods used in greensock by which I can have the exact same effect.

 

Thanks.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Regardless of what the effect is, the main thing GSAP is going to handle for you is the sequencing of animations. What it boils down to is taking a fullscreen element, introducing a column on the right that is split vertically, and then introducing another column on the right that is split vertically. 

 

I would start with trying to do the css layout for the final state: http://prntscr.com/hdrf3p

Just try to get a few different colored divs to fill the screen like that.

 

And then use TimelineMax to sequence each element coming in and resizing as necessary.

90% of the challenge is going to be in building the HTML and CSS the right way.

 

I'm guessing the GSAP code is going to literally be 3 or 4 lines for that transition.

If you don't know TimelineLite/Max, put this project to the side and experiment with the basics.

 

https://greensock.com/sequence-video

https://greensock.com/position-parameter

 

 

 

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

Thank you so much, Carl. I will check it out and I will keep you posted here. I have seen your replies in many other posts and you are doing a great job helping newbies like me.

 

Update: 
finally achieved the exact effect I am looking for. Thanks to the burger animation and Carl's suggestion. Greensock rules.

Edited by AbhishekSock
Mission Accomplished.
  • 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.
×
×
  • Create New...