Developing a website with many scroll-based animations: a case study

Published Mar 12, 2018Last updated Mar 21, 2018
Developing a website with many scroll-based animations: a case study

The website "Poehali!" ("Let's go!") is devoted to Cosmonautics Day, an anniversary celebrated in Russia on April 12th. The deadline was harsh, so it was developed through the hubbub. Some of the features caused really tricky bugs, so I had to remove them.

After the user presses the “start” button, hold-down arms at the launch pad fall off, and after a short countdown, the rocket starts moving up. As the rocket moves, different objects (a dirigible, a duck flock, etc.) slide out of the left or right side.

There are also other kinds of animations, e.g. a wobbling asteroid belt, or a SATAN (R-36) missile that follows the rocket for some time and stops. Right before the exosphere, the rocket changes its scale to show that it’s flying in the outer space now.

You can watch this video to see how the website works.

If the user clicks on the screen, the rocket stops for a while and starts moving again later on. If the user clicks a yellow target, a popup shows. The popup has a text and social sharing buttons on it. The rocket continues to move after it’s closed.

The website has an animated splash screen. Also it's partly adaptive, and I tested it on some mobile phones and iPads.

For animations, I used GSAP and ScrollMagic. Here is the code snippet of rocket launch:

function launch() {
  var leftRack = $(“.js-rack-left”),
    rightRack = $(“.js-rack-right”), 
    tl = new TimelineMax();
    .to($(“.js-initialmsg”), 1, { autoAlpha: 0 })
    .to($(“.js-startmsg-1”), 0.5, { autoAlpha: 1 })
    .to($(“.js-startmsg-1”), 0.5, { autoAlpha: 0 })
    .to($(“.js-startmsg-2”), 0.5, { autoAlpha: 1 })
    .to($(“.js-startmsg-2”), 0.5, { autoAlpha: 0 })
    .to($(“.js-startmsg-3”), 0.5, { autoAlpha: 1 })
    .to($(“.js-startmsg-3”), 0.5, { autoAlpha: 0 })
    //hold-down arms fall off
    .to(leftRack, 5, { rotation: -35, transformOrigin: “right bottom” }, “start”)
    .to(rightRack, 5, { rotation: 35, transformOrigin: “left bottom”, onComplete: onRackFallComplete.bind(this) }, “start”);

function onRackFallComplete() {
  var tl = new TimelineMax();
    //the rocket shakes at the start
    .fromTo(this.rocket[0], 2, {x: “-=2px”}, {x: “+=2px”, ease:     RoughEase.ease.config({ strength: 3, points: 20, template: Linear.easeOutCirc, randomize: false }), clearProps:”x”}, 0)
    //the rocket flies up
    .to(this.rocket[0], 2, { y: “-=200px”, ease: Linear.easeOutCirc }, 0);

Animation of the object sliding out of the webpage corner is simple:

new ScrollMagic.Scene({ triggerElement: “#triggerDucks”, duration: “100%” })
 .setTween(, 1, { x: “+=1000”, ease: Power0.easeNone, onStart: showTarget, onStartParams: this.ducks })

Here’s a bit more sophisticated animation of the R-36 SATAN missile:

//SATAN follows the rocket for some time
new ScrollMagic.Scene({ triggerElement: “#triggerSatanFlyUp”, duration: 400, pushFollowers: false })
//SATAN is slightly shaking to and fro when undisturbed
var tlrocketFly = new TimelineMax({ yoyo:true, repeat:-1 });
  .to(“#satan”, .4, {y:5, rotation:-.5, transformOrigin: “bottom center”, ease:Sine.easeInOut})
  .to(“#satan”, .4, {y:2, rotation:.25, ease:Sine.easeInOut})
  .to(“#satan”, .4, {y:-2.5, rotation:-.25, ease:Sine.easeInOut})
  .to(“#satan”, .4, {y:6, rotation:.5, ease:Sine.easeInOut});

It required much more time to develop than I expected, and here's why:

  • Unusual scroll direction. I had to fight a bit with ScrollMagic, which is intended for websites with down scrolling.
  • Heavy images. I had to try different variations of optimized and cropped versions to decrease assets load time (otherwise the website would be very mobile-unfriendly)
  • Fact popup had too complicated of a design and too tricky display requirements. Afterward, we simplified the popup requirements, but I had wasted some time working on it.
  • I had to implement several different types of animations. Several of them (e.g. rocket launch, rocket flight, rocket stop, SATAN flight) were too tightly interconnected with page layout, so a bug fix of such animation could easily break page layout and/or other animations (and it often did).
  • The importance of the website (whether it would be sold to some advertiser or not) wasn’t obvious until almost the deadline, so editors provided images and texts incrementally. It caused some severe bugs because when I planned the website layout and animations I couldn’t foresee everything, not having all the images at once.
  • The requirement “should look nice on the director’s iPhone” and “this and that shouldn’t break when the screen is resized vertically” appeared just before the deadline.

After I finished this website, I decided on the following: since the deadline for such a website is no more than two weeks, whereas the manager will ask for features that’ll require about a month, next time I should:

  • Talk the manager into decreasing the number and complexity of different animations (especially animations heavily interconnected with page layout) and find out the importance and priority of each feature.

  • Find out whether all animations (or at least some of them) can be turned off on mobile devices (except iPhones and iPads).

  • Look for bugs when the screen is resized vertically.

  • Not work on animations during weekdays, so if any animation totally breaks the website, I could ask the manager whether we should try to fix it or simplify website requirements.

Discover and read more posts from Natalia Dushkina
get started