Lindsayanng

July 6, 2012

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.

June 28, 2012

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?

June 27, 2012

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

June 7, 2012

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

June 7, 2012

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.

June 7, 2012

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?

June 6, 2012

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>

Notifications

Messages

Lindsayanng

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Lindsayanng

animating size based on where we are on the page

animating size based on where we are on the page

animating size based on where we are on the page

Start an animation based on scroll position?

Can someone point out why this doesn't work?

Start an animation based on scroll position?

Start an animation based on scroll position?