Lindsayanng

Ok i understand.. I thought that because GreenSock has the offset functions for the animations that there might be additional ways to offset and trigger the animation based on which div container is in the viewport. As I said, I am new to javascript and all of this, but I am not new to coding. I understand the logic but really need to grasp the available features of such a library better. Hoping the Greensock can help me more in the future, but itseems as though I might be best off going with a basic jquery option for this ttype of animation. Thanks.. and if ANYONE comes across this post and has some input, I am still open and working with it.

Hi carl - thanks for the nice introductory answer and information. I totally understand that you can't give everyone individualized support on how to work soemthing for THEIR websites. I do not understand, though, how my question on how to initiate an animation based on a specific location on a page is unique to my situation. My implementation of GreenSock isn't NOT working, it's not there. I don't exactly know how to do that type of "off set" to trigger the same animated multiple ways. Am i making sense?

So i am completely new to greensock and javascript animations in general and relatively new to javascript (although I know other web languages HTML, CSS, PHP, MYSQL) I have a website that works like a single page website where the navigation just goes to div ID's and I use a basic smooth scroll to the get there. My navigation is fixed to the top of the page. So in the navigation bar that is fixed to the top of the page, I have this little tag that I would like to drop down / expand when you are on a specific div and then shrink back up when you go away from that div If I am not making sense, here are some screen shots: The "home page" which is basically the first <div> in the stack http://cl.ly/33371i3B2q0V0D203T1u the "about page" which is the third <div> in the stack http://cl.ly/013H3f3c1i093C152J32

OMG I'm a dope!! this is something i should know from my other coding knowledge.. syntax error.. One too many ')'

A div is not a DOM element in the way that it's width is always controlled by CSS.. So the docs are right. From what I understand, which isn't much at this point. They go into a lot more detail in the video tutorial that goes along with that doc.

Thanks so much for your help. I basically just copied your code exactly (all you did was add , 0, -200) because it's easier for me to understand what the code does after seeing it in motion, and now none of the animations work. code posted below: // individual element tween examples controller.addTween('#fly-it', TweenLite.from( $('#fly-it'), 3.25, {css:{left:'2000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3.25, {css:{opacity:0, rotation: 360}, ease:Quad.easeInOut}), 0, 200)); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3.25, {css:{scale:3}, ease:Quad.easeInOut}), 0, 200)); When you say "duration" of the tween, i'm not entirely sure what that means because I had thought the number defined before the css change was the duration (in this case 3.25). Maybe I am getting my terminology mixed up. When you offset, are the numbers like 200/-200 in pixels? Or are they somewhat arbitrary?

Hello. I am very new to javascript but am a fast learner and can code php, html, and css on an advanced level, just to give you a background. I've read through a couple js tutorials and videos before jumping in to this and then I also took a look at the basic tutorials on this site to learn a little more about animations in general. I am putting together a site where I have two kinds of animations. The first is a very basic smooth scroll to an anchor on the same page. The second is the content fly-ins. I would like to have specific content animate at specific points in the scroll. I am using the SUPERScrollarama "addon" that uses the GreenSock library, and as far as I can tell, the animation triggers when the element is in the center of the page. Even stranger still, the animation doesn't trigger until after its almost out of view of the screen on an iphone. Below is the scrollarama javascript file and my little animation snipped that I am using. The animations I am starting out with are just VERY basic until I get my feet wet and figure out specifically how I want things to move in to view. /* SUPERSCROLLORAMA - The jQuery plugin for doing scroll animations by John Polacek (@johnpolacek) Powered by the Greensock Tweening Platform http://www.greensock.com Dual licensed under MIT and GPL. */ (function($) { $.superscrollorama = function(options) { var superscrollorama = this; var defaults = {isVertical:true}; superscrollorama.settings = $.extend({}, defaults, options); // PRIVATE VARS var animObjects = [], pinnedObjects = [], didScrollCheck = false, timeline = new TimelineLite(); // PRIVATE FUNCTIONS function init() { // scroll to top of page $('html, body').animate({ scrollTop: 0 }, 0); $(window).scroll(function() { didScrollCheck = true; }); setInterval(function() { if (didScrollCheck) { checkScrollAnim(); didScrollCheck = false; } }, 50); } function checkScrollAnim() { var currScrollPoint = superscrollorama.settings.isVertical ? $(window).scrollTop() : $(window).scrollLeft(); var offsetAdjust = superscrollorama.settings.isVertical ? -$(window).height()/2 : -$(window).width()/2; var i, startPoint, endPoint; // check all animObjects var numAnim = animObjects.length; for (i=0; i<numAnim; i++) { var animObj = animObjects[i], target = animObj.target, offset = animObj.offset; if (typeof(target) === 'string') { startPoint = superscrollorama.settings.isVertical ? $(target).offset().top : $(target).offset().left; offset += offsetAdjust; } else if (typeof(target) === 'number') { startPoint = target; } else { startPoint = superscrollorama.settings.isVertical ? target.offset().top : target.offset().left; offset += offsetAdjust; } startPoint += offset; endPoint = animObj.dur ? startPoint + animObj.dur : startPoint; if ((currScrollPoint > startPoint && currScrollPoint < endPoint) && animObj.state !== 'TWEENING') { // if it should be TWEENING and isn't.. console.log('TWEEN'); animObj.state = 'TWEENING'; animObj.start = startPoint; animObj.end = endPoint; animObj.tween.progress((currScrollPoint - animObj.start)/(animObj.end - animObj.start)).pause(); } else if (currScrollPoint < startPoint && animObj.state !== 'BEFORE') { console.log('BEFORE'); // if it should be at the BEFORE tween state and isn't.. animObj.tween.reverse(); animObj.state = 'BEFORE'; } else if (currScrollPoint > endPoint && animObj.state !== 'AFTER') { console.log('AFTER'); // if it should be at the AFTER tween state and isn't.. animObj.tween.play(); animObj.state = 'AFTER'; } else if (animObj.state === 'TWEENING') { console.log('TWEENING'); // if it is TWEENING.. animObj.tween.progress((currScrollPoint - animObj.start)/(animObj.end - animObj.start)).pause(); } } // check all pinned elements var numPinned = pinnedObjects.length; for (i=0; i<numPinned; i++) { var pinObj = pinnedObjects[i]; var el = pinObj.el; // should object be pinned? if (pinObj.state != 'PINNED') { startPoint = pinObj.spacer ? superscrollorama.settings.isVertical ? pinObj.spacer.offset().top : pinObj.spacer.offset().left : superscrollorama.settings.isVertical ? el.offset().top : el.offset().left; startPoint += pinObj.offset; endPoint = startPoint + pinObj.dur; if (currScrollPoint > startPoint && currScrollPoint < endPoint && pinObj.state !== 'PINNED') { // pin it pinObj.state = 'PINNED'; // set original position value for unpinning pinObj.origPositionVal = superscrollorama.settings.isVertical ? el.css('top') : el.css('left'); if (pinObj.origPositionVal === 'auto') pinObj.origPositionVal = 0; else pinObj.origPositionVal = parseInt(pinObj.origPositionVal, 10); // change to fixed position el.css('position','fixed'); if (superscrollorama.settings.isVertical) el.css('top', 0); else el.css('left', 0); pinObj.pinStart = startPoint; pinObj.pinEnd = endPoint; if (pinObj.spacer) pinObj.spacer.css('height', pinObj.dur + el.outerHeight()); if (pinObj.onPin) pinObj.onPin(); } // Check to see if object should be unpinned } else { if (currScrollPoint < pinObj.pinStart || currScrollPoint > pinObj.pinEnd) { // unpin it pinObj.state = currScrollPoint < pinObj.pinStart ? 'BEFORE' : 'AFTER'; // revert to original position value el.css('position',pinObj.origPosition); if (superscrollorama.settings.isVertical) el.css('top', pinObj.origPositionVal); else el.css('left', pinObj.origPositionVal); if (pinObj.spacer) pinObj.spacer.css('height', currScrollPoint < pinObj.pinStart ? 0 : pinObj.dur); if (pinObj.onUnpin) pinObj.onUnpin(); } else if (pinObj.anim) { // do animation pinObj.anim.progress((currScrollPoint - pinObj.pinStart)/(pinObj.pinEnd - pinObj.pinStart)); } } } } // PUBLIC FUNCTIONS superscrollorama.addTween = function(target, tween, dur, offset) { tween.pause(); animObjects.push({ target:target, tween: tween, offset: offset || 0, dur: dur || 0, state:'BEFORE' }); }; superscrollorama.pin = function(el, dur, vars) { if (typeof(el) === 'string') el = $(el); if (vars.anim) vars.anim.pause(); // create wrapper for pinned elements that aren't absolute or fixed position var pinSpacer = null; if (el.css('position') === 'relative' || el.css('position') === 'static') { pinSpacer = $('<div class="pin-spacer"></div>'); el.before(pinSpacer); } pinnedObjects.push({ el:el, state:'BEFORE', dur:dur, offset: vars.offset || 0, anim:vars.anim, origPosition:el.css('position'), spacer:pinSpacer, onPin:vars.onPin, onUnpin:vars.onUnpin }); }; // INIT init(); return superscrollorama; }; })(jQuery); My animations: <script type="text/javascript" > $(document).ready(function() { $('body').css('visibility','visible'); var controller = $.superscrollorama(); // individual element tween examples controller.addTween('#fly-it', TweenLite.from( $('#fly-it'), 3.25, {css:{left:'2000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3.25, {css:{opacity:0, rotation: 360}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3.25, {css:{scale:3}, ease:Quad.easeInOut})); }); </script>