Tag Archives: Animation

ScrollMagic – Pinning Tutorial

So I didn’t quite start on what I had previously said I would – rebuliding one of my first apps ‘Luas App‘ using React.js. Instead I got sidetracked by my many a feathered, tutorial hell and tumult of life. I did however been meandering through various endeavours in the social media space focused on coding. First being my latent programming youtube channel

And the other being my new instagram page (channel, space?):

So in the midst of all that, I came across yearly periodical “The Ultimate JavaScript Manual 2019.”

Some interesting reads, good for getting to see what’s what from the who’s who on web development – I think. Apart from the tooling section, the frameworks and examples aren’t my cup of tea. You still fall into the tutorial trap.

One that I picked was Scrolling animations using ScrollMagic. Looking back at the article, I HIGHLY doubt I did the tutorial mentioned. Instead I just made a quick tutorial video while I was trying to pick apart the items they had mentioned and trying it out on my own.

These are the key points:

  • ScrollMagic works on the concept of controllers and scenes.
  • Controllers set the stage for the animation objects and global settings of any contained scenes.
  • Scenes define the settings for the item being referenced e.g. a floating indicator, or navigation bar that needs to be pinned to the viewport.
  • Once the scene is set, it is passed onto the controller to take effect.

I only used jQuery and the ScrollMagic library and plugins – the latter two is shown when you first visit the ScrollMagic site.

For the setup and walkthrough, check out my video tutorial:

I’m hoping to get back into ScrollMagic animations soon and do some more explorations and tutorials. So stay tuned. Until then, adios.