How do they do this?

[erayner_45092 21 Likes (Newbie)]

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

[anthonygreco 54 Likes (Contributor)]

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();
}

 

[erayner_45092 21 Likes (Newbie)]

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

[anthonygreco 54 Likes (Contributor)]

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!

 

 

[OSUblake 9,990 Likes (Superhero)]

Here's how to perform a rectangle clip using only transforms for best performance.

 

See the Pen 6646d7d2b5ba66947cee139bd7a4ff55?editors=0010 by osublake (@osublake) on CodePen