Jump to content
Search Community

Search the Community

Showing results for tags 'scroll position'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much
  2. 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); } });
×
×
  • Create New...