CODEWITHSUNDEEP
javascriptanimation
SWL
SWL

Reputation: 3864

How is this In-browser lightweight animation done?

I see a number of sites have auto-loading animation as soon as you scroll down to the particular part of the site with the animation - apple.com has it, most recently I found it on http://www.bugherd.com/features

I see a number of PNGs loaded in the web inspector but I can't determine how its being done.

Upvotes: 0

Views: 230

Answers (3)

mmilo
mmilo

Reputation: 81

Also as an aside the animations on the Apple site are fairly complex, but there’s a pretty detailed run down of the techniques used to achieve their effects. It’s well beyond what we’re doing on BugHerd though :)

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

Upvotes: 1

mmilo
mmilo

Reputation: 81

it’s Matt (co-founder & designer @ BugHerd) here :)

Really glad to hear you like the animations we put together on the features page. In order to achieve the effect we used the transit.js library: http://ricostacruz.com/jquery.transit/

It uses the same syntax as jQuery animations and uses the animation queue as well. I put together the animation by loading up all the images needed and then transitioning, hiding and showing as required.

Happy to answer any other questions you might have about how to implement this on your own site.

Cheers!

Upvotes: 1

Andrei Nemes
Andrei Nemes

Reputation: 3122

I'm not sure what you're talking about, but if you are referring to the animations Apple had when presenting the iPad, it's easy to do. What you do is bind an event listener to the page/container scroll event. Then, check if your element is in view range, by comparing its top offset to the scroll height. If it's in view, call a function to animate the element. This can be done either by a single image sprite animating the background-offset, or an actual image sequence or even a canvas - your call.

Upvotes: 0

Related Questions