Here is an example pen : http://cdpn.io/iKuBw
I can't link the scrollorama JS in to Codepen. - However, this code is a copy of what I'm looking at.
This is actually copied excerpts of the simpledemo.html from the scrollorama github. When I put this into an editor on my desktop it doesn't work either.
All I want to do is get the "FLY IT" example to work. I'm trying to isolate everything that is associated with <h2 id="fly-it">Fly It</h2> and make JUST THAT effect work.
So I start the controller js - "$(document).ready(function() {
var controller = $.superscrollorama();
add the tween js : controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .250, {css: {right:'1000px'}, ease:Quad.easeInOut}));
I copy the HTML into the .html: <h2 id="fly-it">Fly It</h2>
I copy in all the CSS but I'm not sure why I need CSS? GSAP tweens are controlled in the JS tween.to() function. However, when I delete all the CSS scrollOrama no longer works. So I'm trying to figure out what parts of the CSS I need. - so I add all the CSS associated with "#fly-it"
QUESTION #2 (kind of the same question)
In the scollorama simpledemo.html - if you move the <h2 id="fly-it">Fly It</h2> outside of the
<div id="content-wrapper"> it breaks it. I don't understand why.
I know this isn't a scollorama forum but I appreciate your help trying to wrap my head around it. If you prefer not to answer because this isn't the place for it - I get it.
I have a pretty good take on animating tweens in GSAP but I can't get the scollorama integration figured out.
Thanks again
jason