Jump to content
GreenSock

popflys

Animate position on scroll position

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm going to start off by saying that I'm a JavaScript idiot, I can get my way around things but this is my first time attempting to create a real animation on scroll position and I'm totally lost.

 

I'm using the superscrollorama plugin and I want to make an image, that is relatively positioned near the bottom of the page, "pin" when it meets the middle of the page.

 

Here is my code, and thank you anyone who can move me forward. I'm lost.

 

HTML:

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Withings - En savoir plus - balance Withings</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/jquery.lettering-0.6.1.min.js"></script>
<script src="js/jquery.superscrollorama.js"></script>
</head>
<body>
<header>
</header>

<div class="main">
 <div id="wrapper">

  <div class="scale">						   
  </div>

 </div> 
</div>
</body>
</html>

 

CSS:

 

html {
min-height: 100%;
}
body {
min-height: 100%;
}
a {
color: rgb(6,139,183);
text-decoration: none;
font-family: MyriadPro-Regular;
-webkit-transition: color linear 0.2s;
-moz-transition: color linear 0.2s;
-ms-transition: color linear 0.2s;
-o-transition: color linear 0.2s;
transition: color linear 0.2s;
}
a:hover {
color: rgb(50,139,255);
}
header {
height: 140px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: top center;
width: 100%;
z-index: 1;
position: fixed;
}
article {
}
.main {
overflow: hidden;
padding-top: 150px;
position: relative;
}
#wrapper {
margin: 0 auto;
display: block;
   position: relative;
   width: 980px;
   height: 2000px;
}
.scale {
   width:980px;
   height:977px;
   position: relative;
   background: url('images/scale_screen-off.jpg') no-repeat scroll;
   top: 420px;
}

 

JavaScript:

 

$(document).ready(function() {
  $('body').css('visibility','visible');
   function initScrollAnimations() {
   $('#wrapper').css('display','block');
   var controller = $.superscrollorama();

   controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}, 0,200);
  }
 });$(document).ready(function() {
  $('body').css('visibility','visible');
   function initScrollAnimations() {
   $('#wrapper').css('display','block');
   var controller = $.superscrollorama();

   controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}, 0,200);
  }
 });

Link to comment
Share on other sites

Some issues with the code:

  • You embed jQuery twice
  • It is recommended to put the JS at the bottom of the page before </body>
  • You have 2 document ready events.
  • The 3rd parameter in your TweenLite.from statement is missing a closing bracket:
    • you did:{css:{position:'fixed'}
    • should be: {css:{position:'fixed'}}

    [*]The TweenLite.from statement isn't properly closed with a parenthesis

    • you did: TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}
    • should be: TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}})

    [*]initScrollAnimations() is never invoked. And in the example provided, isn't necessary.

If you want to improve your JS chops, I recommend taking the free JS courses at http://www.codecademy.com/tracks/javascript Also, I recommend using Dev Tools and a JavaScript validator (like http://www.jslint.com) to catch these types of errors.

 

$(document).ready(function() {
  $('body').css('visibility','visible');
  $('#wrapper').css('display','block');
  var controller = $.superscrollorama();
  controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}}), 0, 200);
});

  • Like 3
Link to comment
Share on other sites

Hey great answer; just wanted to add that using more than one $(document).ready() in jQuery is still viable code (although it's not good practice to confuse code by doing it when it isn't necessary).

 

Each $(document).ready() call actually adds to the end of a queue, e.g. if you need to include 2 separate files that both call $(document).ready() then both of the functions will still work (in the order the files were included).

Link to comment
Share on other sites

Thank you for the responses. I'll be sure to clean this up and continue learning. A little learning is a dangerous thing.

 

Thanks again.

Link to comment
Share on other sites

Okay,

 

I cleaned it up thanks to your response and it's moving but it's a bit jittery. It almost does what I want it to do (which is to move from it's position at the bottom of the viewport and animate to the middle of the page while scrolling down, but become fixed (scroll block? or pinned?) when it reaches the middle of the page).

 

Here's the JS

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script src="js/jquery.lettering-0.6.1.min.js"></script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
 $(document).ready(function() {
 $('body').css('visibility','visible');
 $('#wrapper').css('display','block');
 var controller = $.superscrollorama();
 controller.addTween('.scale', TweenMax.fromTo($('.scale'), 3.25,
		  {css:{top:'430', position: 'absolute'}},
		  {css:{top: '340', position: 'fixed'}}), 0, 200);
 });

</script>

 

Any help with this?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×