Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Lindsayanng

  1. 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.

  2. 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?

  3. 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



    the "about page" which is the third <div> in the stack


  4. 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?

  5. 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
    Dual licensed under MIT and GPL.
    (function($) {
       $.superscrollorama = function(options) {
     var superscrollorama = this;
     var defaults = {isVertical:true};
     superscrollorama.settings = $.extend({}, defaults, options);
     var animObjects = [],
      pinnedObjects = [],
      didScrollCheck = false,
      timeline = new TimelineLite();
     function init() {
      // scroll to top of page
      $('html, body').animate({ scrollTop: 0 }, 0);
      $(window).scroll(function() {
       didScrollCheck = true;
      setInterval(function() {
       if (didScrollCheck) {
     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..
     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') {
     // if it should be at the BEFORE tween state and isn't..
     animObj.state = 'BEFORE';
       } else if (currScrollPoint > endPoint && animObj.state !== 'AFTER') {
     // if it should be at the AFTER tween state and isn't..
     animObj.state = 'AFTER';
       } else if (animObj.state === '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;
       pinObj.origPositionVal = parseInt(pinObj.origPositionVal, 10);
      // change to fixed position
      if (superscrollorama.settings.isVertical)
       el.css('top', 0);
       el.css('left', 0);
      pinObj.pinStart = startPoint;
      pinObj.pinEnd = endPoint;
      if (pinObj.spacer)
       pinObj.spacer.css('height', pinObj.dur + el.outerHeight());
      if (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
      if (superscrollorama.settings.isVertical)
       el.css('top', pinObj.origPositionVal);
       el.css('left', pinObj.origPositionVal);
      if (pinObj.spacer)
       pinObj.spacer.css('height', currScrollPoint < pinObj.pinStart ? 0 : pinObj.dur);
      if (pinObj.onUnpin)
     else if (pinObj.anim) {
      // do animation
      pinObj.anim.progress((currScrollPoint - pinObj.pinStart)/(pinObj.pinEnd - pinObj.pinStart));
     superscrollorama.addTween = function(target, tween, dur, offset) {
       tween: tween,
       offset: offset || 0,
       dur: dur || 0,
     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>');
       offset: vars.offset || 0,
     // INIT
     return superscrollorama;


    My animations:

    <script type="text/javascript" >
    $(document).ready(function() {
    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}));