Jump to content
GreenSock

Lindsayanng

Members
  • Posts

    7
  • 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

    http://cl.ly/33371i3B2q0V0D203T1u

     

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

    http://cl.ly/013H3f3c1i093C152J32

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

×