Make Slide in Animation JavaScript and HTML

Question

How would one make a slide and fade in animation like in seen in the green and pink boxes on sharethis.com? In particular I like the one in the blue box with the arrows. Are there a set of JavaScript codes or CSS effects?

Answer 1

The easiest would probably be to use a library like this:

http://janpaepke.github.io/ScrollMagic/

I see that for the arrows effect the css-height property is animated when you scroll. This is done in javascript. But you can also achieve this effect through CSS3-transitions.

Update: Slide and wipe effects from the demo page:

// ani
var pinani = new TimelineMax()

// wipe
.add(TweenMax.to("#wipe", 1, {
    width: "100%"
}))
// slide
.add(TweenMax.to("#slide", 1, {
    top: "0%",
    ease: Bounce.easeOut,
    delay: 0.2
}));

// pin
new ScrollScene({
    triggerElement: "section#pin",
    duration: 1100
})
.on("progress", function () {
    // keep centered even though width changes
    $("#wipe h3").width($("#pin>h3").width());
})
    .setTween(pinani)
    .setPin("section#pin")
    .addTo(controller);