Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
erayner_45092

How do they do this?

Recommended Posts

Hello, I was wondering if anyone had any idea how this website https://www.box.com/ did their first animation?
ie, as you scroll down, the box opens up and shows images -> how do they do the box that opens up?

 

Any help greatly appreciated :)

Link to post
Share on other sites

Can't say for sure what they're using without digging in, but I can tell you what I've used to build similar things for production ready sites. ScrollMagic (info site: http://scrollmagic.io/ github repo: https://github.com/janpaepke/ScrollMagic) is an excellent library built specifically for such purposes and is leveraging the excellent power of GSAP we all love. :)  You simply build Tweens/Timelines like you'd like to see triggered and then you can set "trigger" points in the scrolling. There are several ways to set it all up. And Jan, the creator, does a great job maintaining it, working with the community, and keeping documentation easily available, etc. There are others out there and the basic premise of what you're referring to is pretty simple too so if you just want to trigger one animation you could do something like below (pseudo code), but if you want animations to be driven by the scroll position, e.g. play the timeline backward when scrolling back up the page as well as other more advanced techniques, then ScrollMagic is the way to go IMHO. There are others out there, that may be comparable, but I don't know of any that integrate GSAP. 

 

var triggerAnimationAtPosition = 300,
animationHasTriggered = false;
if(document.body.scrollTop === triggerAnimationAtPosition && !animationHasTriggered) {
    animationHasTriggered = true;
    timeline.play();
}

 

  • Like 3
Link to post
Share on other sites

Thanks.

I get how to do scrollMagic etc but I am just really looking at how they do the animation.

I have realised that you can control padding with animation -> increasing the padding on objects to make them bigger from a point of 0.

Now I am looking into angled divs and will post here once I have something pretty similar :)

Link to post
Share on other sites

Sounds good. Use the link provided here to create a codepen that already includes GreenSock, and focus only on the "static" animation of what you will want ScrollMagic to trigger, then integrating with ScrollMagic should be relatively easy. But the best reason to do it in codepen is so you can post that link here and you'll get A LOT more feedback from the community.

 

Good luck, and happy tweening! :)

 

 

  • Like 1
Link to post
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.

×