Share Posted May 8, 2017 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 comment Share on other sites More sharing options...
Share Posted May 8, 2017 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(); } 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 8, 2017 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 comment Share on other sites More sharing options...
Share Posted May 8, 2017 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! 1 Link to comment Share on other sites More sharing options...
Share Posted May 8, 2017 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 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now