Is it possible to use scrollmagic.js for sticky animation?

15

I am surprised you do not know the answer to some of this,

You will run into issues because you are using IDs.

So use class names instead of id.

You will also need to know which layout you are on so that you can target it's elements.
It will not work if you try and blanket init for all layouts and elements. Some attributes will likely not exist yet in the DOM.

For example.

Desk layout.
Give the elements the class name of 'pinDesk'

ipad layout.
Give the elements the class name of 'pinPad'

side note: ( you can by the way, if you had one layout, just give all the pin elements a single class name and querySelectAll them. This will save hard coding an array of ids)

Then in the code you can get the layout name and use a switch to change which pin.. class you are looking for.

     elementsToPin = []

	 switch(hypeDocument.currentLayoutName()) {
  case 'ipad':
  elementsToPin =  document.querySelectorAll('.pinPad')
break;
  case 'desk':
 elementsToPin =  document.querySelectorAll('.pinDesk')
break;
 
}

scrollMagic_multiple_timeline_Grouped_multiple_elements_twoJSMHClassNames.hype.zip (28.1 KB)

note: I have added the scrollMagic debug addIndicators to the head, and the ..addIndicators() option in the code.

You will need to remove that when going live.
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js">

1 Like