#scrollmagic

We'll take a breather from your regularly scheduled ReactJS lesson to talk a bit about ScrollMagic and GSAP.

Recently, I was tasked to build an animated storyline for a student's Journey through Fullstack Academy (it is best viewed in Chrome on a Desktop). While I could have used animate and vanilla JQuery to build it, I am lazy, so I spent a good chunk of a week doing research into which technologies and libraries would make my life easier. After testing a bunch of different options, I stopped at ScrollMagic and GSAP. These two libraries are super timesavers!

ScrollMagic, according to its website, "is a scroll interaction library." It came after Superscrollorama and was completely rewritten. It allows you to easily handle how the page interacts with the user's scroll position. It saves you a ton of time and makes things such as parallax effects much easier to do than it would be in vanilla JQuery. The team at ScrollMagic recommends to handle animations with ScrollMagic, but you can do without a framework entirely as well by animating simply using CSS and class toggles.

In my case, I thought GSAP was extremely clear and easy to use, especially to tween and timeline animations, so I opted to go that way. GSAP is a bundle of tools for animating in JavaScript. The two that I used were TweenMax and TimelineMax. TweenMax handles the tweening of just about any property of any object. Tweening is the process of generating intermediate frames of between two stopping points of an object to show the smooth transition of the change. TimelineMax is a sequencing tool to precisely handle timing of the tweens in relation to one another.

Please take a look at the Journey through Fullstack Animation here and give the libraries a try.

Started adding new illustrations,last scene there isn’t finished.

This is the current link to my senior project. It's defiantly a work in progress and it is a super glitchy.

So far I have the first two scenes started..... I want to try to figure out how to get the animations reverable.

Hello there! I am a senior Digital Arts and Sciences student at Clarkson University and this blog will be dedicated to keeping track of my progress on my capstone project. 

I want to create a dynamic website to tell the story of Thumbelina.

I have started playing around with ScrollMagic and TweenMax. I found these to be both very useful tools for web animations. 

I am currently working on a animated #infographic explaining the benifits of #foodforests over traditional food growing systems. I am using a jquery plugin called #scrollmagic and it has become quite code heavy. It will be done (or at least version 1.0 will be done) by friday... Right now between the main HTML Doc and CSS I am sitting at about just over 1000 lines of code. 

stay tuned for updates