Hello, scrollMagic!

Adding animation when scrolling is one of the most popular animations you can ever find. There are many ways of adding those animations, but for quite some time, one of the most used tools has been scrollMagic, an original work by Jan Paekpe.

As of 2023, scrollMagic was still maintained on GitHub, with about 35 contributors and a new version - slowly - in the making.

Here it is an example of the use of scrollMagic by someone who has been learning to use it. The code used for this post is based on a work by Yasser Aziz and can be found at codepen. I advice you to open that pen so you can study the scripts along with this post.

First Step: Declaring the scrollMagic controller

The scrollMagic **controller** is the object that supervises the animation. If you have a set of animations that are commonly related, declaring a single controller for all of them might be the right thing to do.

This is what our coder did first:

                        
    var controller = new ScrollMagic.Controller()

Now, scroll to see the color change...







Second Step: Instantiating the Red Scene

To create an animation using scrollMagic, you need a trigger that indicates where the animation should start and end. Some coders might interpret the start and end of a transformation as different scenes. In this codem the author separated the triggers into HTML sections. There are 5 sections in this code, each identified with an ID ('first', 'second', 'third', 'fourth' and 'fifth'). Those IDs are used to tell scrollMagic "Hey, this is the next scene!".

                        
        var second = new ScrollMagic.Scene({
                                triggerElement: '#second',
                                duration: "100%",
                            })
                            .setClassToggle('body', 'red-bg')
                            //.addIndicators() // remove this before publishing
                            .addTo(controller);

This code reads something like:

"When finding a trigger with value equal 'second', add the red-bg class to the body!"

Let's explain in more detail how the scene object is instantiated:

The very first change should occur when we reach an HTML element, in this case a section, with an ID of value equal 'second'. The selector was assigned to the triggerElement property of the new ScrollMagic.Scene. Similarly, the element to be affected - in this case the HTML body - should be styled based on a class, red-bg, that scrollMagic should add to it. The author defined the new styling in a CSS file. Then, the setClassToggle property of the scene will keep the target HTML element and its new styling.

Notice that the scene is added to the controller at the end of the code.







Third Step: Repeating Code - A Green Scene

Here is something interesting. Notice that the author's approach consisted of instantiating a new scene object for each section.

To save time, the author just copied and pasted the code to instantiate a new scene object, modifying only the assigned values of triggerElement and setClassToggle - the latter with a different class, green-bg. The controller assumes that this is a different scene, so it removes every styiling of the previous scenes and replaces them with the new ones.

Here it is the third scene, changing the background to green:

                        
        var second = new ScrollMagic.Scene({
                                triggerElement: '#third',
                                duration: "100%",
                            })
                            .setClassToggle('body', 'green-bg')
                            //.addIndicators() // remove this before publishing
                            .addTo(controller);






Fourth Step: And Again...: Blue Scene

There is one more instantiation before the code ends, this time changing the background to blue. The code is just the same as before except for the values of triggerElement and the setClassToggle.

                        
        var fourth = new ScrollMagic.Scene({
                                triggerElement: '#fourth',
                                duration: "100%",
                            })
                            .setClassToggle('body', 'blue-bg')
                            //.addIndicators() // remove this before publishing
                            .addTo(controller);






Tada!

In the original code, the last animation is not instantiated. The fifth HTML section doesn’t have a scrollMagic scene associated with it. As soon as we leave the previous scene (i.e. the fourth HTML section) scrollMagic implements an animation that ends in a default layout (white background). It does it by removing the styling class.

And that was it.

So… What did we learn from this code in order to do something similar?

One thing the coder must do is to find a proper identification of the HTML elements that will hold the triggers of the animation, and pass that identification to scrollMagic as property.

The other thing is to identify the HTML elements that will be changed. They might be different to those holding the trigger value. In the example above, changes were implemented to the body tag. Additionally, it is necessary to define how our target elements should change. Those changes might be set as (CSS) attributes included in our stylesheet under a single CSS selector (usually classes, but can be other).

A couple of other things worth remembering about scrollMagic are scenes and controllers.

In scrollMagic (and in many other animation and visualization packages) the concept of scene is commonly used as declaration of the animation events. It contains the trigger and details about the expected animation, such as the HTML elements to be affected when reaching that trigger and the new styling. The scene also contains the animation properties (eg. duration).

Once you have identified the scenes, you might want to call the controller. This is actually the executor of the animation. Once the scenes are instantiated, they have to be added to the controller in order to start the animation. Every time a trigger is activated, the controller will look for the target elements in the HTML page and will add / replace the styling selectors as defined on the associated scene.

Something to remember… Different coders working on a similar project might define the scenes differently, and sometimes the definition of the scene might depend of what you are allow to do given the limitations of the technology.

Final remarks

This code worked just fine. However I wonder if there would be things that could have been done differently? Do you have any ideas? Try to think at different ways to code this project!

Ok, this is all for this post! Hope it was helpful. And keep coding!