Scroll Animation

Ignition includes scrolling animation with scroll magic!

This means you can easily create animations on elements as you scroll. You can have a class get added when you scroll to a certain point and then you can have it get removed.

Normally with scrollMagic you need to add javascript. With ignition, some data-attributes have been added to allow you to give items animation without using too much javascript.

How Scroll Magic Works

With scroll magic there is a scene, which basically contains an element that will be used to trigger the animation. The element that triggers the animation might not always be the element that gets animated. For instance you may want that when box A scrolls in from the bottom, box B should fade away. In this case, you would be animating box B, and the trigger element is box A.

Scroll Animation Attributes

You can add data-scrollanimation to add scrolling animation to an element. There are a few data attributes you can actually use. Here they are with the values they expect to be given. You would place these on the element to be animated.

  • data-scrollanimation = “Class to toggle on this element”
  • data-scrolltrigger = “the selector for the element that triggers the scene to start”
  • data-scrollhook = “onEnter, onLeave, default is center”
  • data-scrolloffset = offset from scene start
  • data-scrollduration = how long it should last. if not set, 0 is used and that means it doesn’t reset until you scroll up.
  • data-scrollscrub = tweens between two classes. tween expects a scroll duration, else duration will be 100 by default.

Now we will go into more detail for each attribute.

Scrolltrigger

The scrollTrigger tells scrollMagic which element to be watching. If you dont have this, it will use the current element as the trigger. 

Issues

If you plan on animating the object up or down or fixed, make sure the trigger element is another element because it can mess up when to start the animation. Every time the element moves up/down with animation it will recalculate the starting of the scene and you will have jittering.

Scrollhook

With this you can let scrollMagic know which hook it should use. When the trigger element enters from the bottom (onEnter), when it leaves the screen at the top (onLeave) or when it is in the center of the screen (center).

Scrolloffset

You can set an offset from the hook. You can add a positive or negative integer. So if you want to animate something when the trigger element is 100px below the screen you would use a hook of onEnter, and an offset of 100px.

Scrollduration

How long the duration should last. If it’s 0, your item will animate both ways. when you scroll down and up. This is the default. If you add a duration, it will remove the animation class after that many pixels are scrolled.

scrollscrub

This ones cool. It makes the scrolling animation work a bit differently. It uses tween-max to tween the item as you scroll. The item will be on a track and will slowly animate as the user continues to scroll. There must be a duration set for this. Also make sure there is a starting class put on your element so it know what it’s tweening from. Lastly transitions may get in the way, so make sure your item has no transition that might affect the tweening.

Fixed-at-top

A special scroll animation has been made for you if you want to fix something at the top of the browser. If you use data-scrollanimation=”fixed-at-top” the element will get fixed when it reaches the top of the screen. No other attributes are needed.

A special div will also get created and wrap around your element so when it gets fixed at the top, the created div will fill the space needed so the page does not jump when the element gets a position of fixed and is removed from the flow of the page.

Scrolling Examples

Lets make a basic item that animates a toggled class! Press preview and then Scroll up and down on the button below to see it in action. 

<div class="demo-button button" data-scrolloffset="200" data-scrollanimation="toggled-on">
	I Should change colors on scroll.
</div>

The button above is toggling the class toggled-on.

Scrolling With Tweening

Now let’s make a scroll animation that tweens from one class to another. This is really fun and cool. We will make use of the scrollscrub attribute. 

<div class="demo-button button start-class" data-scrollscrub data-scrollanimation="moveright" data-offset="50" data-scrollhook="onEnter" data-duration="300">
	I'm Gonna Move To The Right
</div>

<style>
	.moveright{
		transform: translate(500px, 0);
		background: var(--brightorange);
	}
	
</style>

As you can see this item moves towards the right and changes colors. Instead of a class being toggled on and off, we are literally slowly adding the class and its properties  over time as the user scrolls. For this to work you will need to make an ending class. I made one called moveright. It moves it right and makes it blue.

If your animation wont tween right, it could be you need a starting class added, so that it knows what to tween from. So you would make a class that has it’s starting positions and add that to the element. Then it should transition from one class to the other properly.

Scroll Animation with Only Javascript

If you don’t want to use data attributes you can run scroll magic using just javascript.
You can read up on how to use it here http://scrollmagic.io/docs/

You basically need to make a scene and attach it to the scrollMagicController object. It looks something like this.

let scene = new ScrollMagic.Scene({
        triggerElement: '.some-class',
        offset: 10,
        triggerHook: 'onLeave'

    }).setClassToggle('.some-element', 'fixed').addTo(scrollMagicController);

The above code would toggle a class called fixed on .some-element, when .some-class is leaving the screen scrolling out the top. This scene is attached to the scrollMagicController object. You can make one yourself, although this one already exists and is made by ignition. To make sure you have access to this object, your code needs to run after ignitions events run. There is an event that you can attach to and make sure that your code runs after ignition events have loaded. To do that just use this:

document.addEventListener('afterIgnEvents', function () {
//your code   
let scene = new ScrollMagic.Scene({
        triggerElement: '.some-class',
        offset: 10,
        triggerHook: 'onLeave'

    }).setClassToggle('.some-element', 'fixed').addTo(scrollMagicController);
});

By adding the code into this event listener we have access to scrollMagicController.

Tweening the scene (scrollscrub)

You can tween the class instead of toggling it, just like suing scrollscrub. To do that you will need to add a tween and add that to the scene. Scrollmagic uses tweenmax and gsap to accomplish this. See below.


//after all ignition events have loaded.
document.addEventListener('afterIgnEvents', function () {

//lets animate the sidebar color
    let sidebarColor = TweenMax.to('#panel-left', .65, {
        className: '+=' + 'colored' //will tween .animated to the panel-left
    });

    let scene = new ScrollMagic.Scene({
        triggerElement: '.trigger-sidebar',
        offset: 0,
        triggerHook: 'onEnter',
        duration: 300

    }).setTween(sidebarColor).addTo(scrollMagicController);
});

The above is very similar to adding a toggled class, except we add the tween item instead. Now the code will tween to the ‘colored’ class instead of just toggling it completely on.

This code is actually set to run right now, so the sidebar should have changed colors by now. Pretty cool huh?
Have fun animating your pages 🙂