Search the Community

At this point, I have no earthly idea how to deliver all of those behaviors. Some seem fundamentally incompatible. For example, in order to permit touch-scrolling in the one direction, we cannot call preventDefault() on the touchdown/pointerdown event but to prevent the link activation, it seems to necessitate calling preventDefault(). We either call it or don't We've already done quite a bit of fancy-footwork under the hood to get around a bunch of browser bugs/inconsistencies and normalize behavior, but in this case I can't see a solution. Of course you could just solve the problem by manually altering the blur/focus state that's causing problems for you. Or disable native touch scrolling. Sorry I don't have a great/easy solution that can be baked into Draggable here. If you (or anyone) have any suggestions, I'm all ears.

Hello, i have a problem with some action i needed to my website. So, what i want its i can control the direction of draggable only to down and when i try move drag to top the section "div" doesn't move just lock. But this action work in first ".post", because i have a list and i have first and last, and when the first just drag to down and last just drag to top. I have this code. If some one can help me with this problem i appreciate. Thanks. var $post = $(".post"); var boxHeight = $(window).height(); var animation = TweenMax.to(".post", { scrollTo: {y: "+=" + boxHeight}, ease: Power4.easeInOut, }); Draggable.create(".post", { type:"y", cursor: "grab", throwProps:true, edgeResistance:0.7, dragResistance:0.3, maxDuration : 0.6, minDuration : 0.4, dragClickables:true, zIndexBoost:false, onClick:function() { console.log("Click"); TweenLite.set(".post",{cursor:"grabbing"}); }, onDragStart:function() { TweenLite.set(".post",{cursor:"grabbing"}); console.log("drag start"); }, onDragEnd:function() { console.log("drag ended"); }, onDrag: updateProgress, onThrowUpdate: updateProgress, snap: { y: snapY } }); function snapY(y) { return Math.round(y / boxHeight) * boxHeight; } function updateProgress() { // var norm = normalize(this.x, xMin, xMax); var postfst = $(".post.active").attr('id'); animation.progress(this.y / boxHeight); } *i cant put the full project in codepen

Another option I remembered this old AS3 function called map() that basically combines the normalize and percentToRange functions: public static function map(num:Number, min1:Number, max1:Number, min2:Number, max2:Number, round:Boolean = false, constrainMin:Boolean = true, constrainMax:Boolean = true):Number { if (constrainMin && num < min1) return min2; if (constrainMax && num > max1) return max2; var num1:Number = (num - min1) / (max1 - min1); var num2:Number = (num1 * (max2 - min2)) + min2; if (round) return Math.round(num2); return num2; } http://snipplr.com/view/65580/as3-map-a-number-within-one-range-to-another-range/ Converted to JS it would be used like this: onDrag: function(){ temp.innerHTML = map(this.rotation, 0, -180, 18, 26, true); } http://codepen.io/GreenSock/pen/NRoVWB?editors=0011

That's not really data that we expose via the API for several reasons: The values aren't always simple and clean, and we must store them in ways that are optimized for performance. For example, boxShadow is a string with a bunch of individual values in it, as is transform and sometimes borderRadius or border, etc. We bust them up into their components and often have to perform unit conversions as well, and get down to the bare numbers and normalize all the units. That's what we ultimately store, and it can be a little different for each plugin (again, optimized for performance). Some values just don't lend themselves to this sort of thing, like what would you expect to get back if you checked throwProps or physics2D or drawSVG that had complex values? To limit API complexity. But if your goal is to get back to the original values, you should be able to pretty easily rewind the tween/timeline with seek(0), then snag whatever you want (like element.style.property) and then jump back to wherever the tween/timeline was. Does that help?

I noticed a few things: You were setting transform-origin in your CSS (and also making it !important), but various browsers simply don't support that type of thing on SVG elements (or it's very buggy). In this case, GSAP was applying the appropriate transform values but some browsers (like Chrome) were ALSO adding your transform-origin !important stuff which got in the way, whereas other browser (like Safari) ignored the CSS in that case. That's why we always recommend setting all transform-related properties via GSAP instead; it's much more compatible. So once you remove that transform-origin CSS that was causing the conflict, the issue seems to have cleared up. Another option is to set CSSPlugin.useSVGTransformAttr = true; so that it forces GSAP to use the transform attribute on SVG elements in all browsers rather than CSS. That seems to normalize behavior as well (Safari and Microsoft MUST use the transform attribute anyway because MS doesn't support CSS transforms at all and Safari is very buggy). It also seemed to solve the problem if I removed "!important" from your CSS rule. For the record, svgOrigin doesn't support percentages - it's for pixel values. Does that help?

Let's tackle one thing at a time. I got it correctly, the main point in your last comment is to understand the relationship between the set x/y to the tweening of x/y and then module of x/y. It's to do with translating the element in a coordinate system (in this case SVG but it's the same logic with DOM elements). Before you do any modifications to the elements with GSAP, your elements are all sitting at translate(0,0) (assuming no other translate() modifications were applied), when you tell GSAP to tween the elements using the relative syntax "+=", GSAP will add the amount specified to the element's current position. The first thing you want to do is to spread your elements along the space you have available. The .set() loop. Now the elements are sitting at translate(x * i,y * i), no longer all at the same spot. Tweening them by "+=10" will mean the element[0] is at translate(10,10), element[1] would be at translate(20,20) - assuming a 10 units gap - element[2] would be at translate(30,30) and so on. With the modifiers plugin, each element gets a check on its own local translate(x,y). By using a function that calculates the module of specific amounts, you can clamp the translate(x,y) as the value returned by the function is a number, not the relative "+=" string. When you ask for a module of a number by the same number, you get 0, making the element jump back to the starting position. Looking at your Pen (which is very helpful, by the way) I can see that you're nearly there. The main issue that I see is that you're not hitting the end of the x and y at the same time, the panels are all moving slightly to the right as they move as they get to the bottom. Basically the proportions are not right. With six elements, being 388 wide and 220 high, you want to move them by 2328 x and 1320 y. (388 * 6 = 2328 and 220 * 6 = 1320) Here's a fork of your pen with one of the lines corrected. I have also tweaked your css so we can see the clipped elements, it helped to see what was going wrong. http://codepen.io/dipscom/pen/ZBBeJb?editors=1010

I guess I was waiting for @Chris to respond before going into details. My thinking was that if you're having trouble positioning or animating SVG text, that you could use SplitText on regular text inside a hidden div as a proxy. From there, you could map any changes or animations done on the hidden text to the SVG text. Here's how mapping works. You normalize the values of the source (hidden text) by converting them to a value between 0 and 1. Essentially, a ratio. You then use that ratio to interpolate the values of the destination (SVG text). Here's a simple example using two boxes inside different containers. I'm mapping the animation of the purple box onto the orange box. Even though both boxes and containers use different dimensions, the mapping works out to be the same. http://codepen.io/osublake/pen/5d439258a9fb08c03c121d41e79cc3ac?editors=0010

Another way to offset an animation is to use negative delays. The timeline will normalize the time difference so you won't see a delay. Here's how you can create your timeline using map reduce. var timeline = boxes.map(bezierTween) .reduce(buildTimeline, new TimelineMax({ repeat: -1 })); function bezierTween(box) { return TweenMax.to(box, time, { bezier: bezier, repeat: -1 }); } function buildTimeline(tl, tween, i) { return tl.add(tween, i * delay); } Demo... http://codepen.io/osublake/pen/5c2f147eb49c7053afc9752b8859f9c7/?editors=0010

If I understand your question correctly, this has nothing to do with GSAP. IE uses a different default way of scaling things. You can probably just tweak your CSS and/or the width/height attributes to normalize things. A quick Google search got me here: http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ and https://css-tricks.com/scale-svg/. Sara Soueidan, for example, suggests explicitly setting the width to 100%. Does that help?

Remember how I said normalization is key to figuring out most animation problems? Just record a couple of start values and you're good to go. Note that you should not clamp the value because that will prevent it from looping. http://codepen.io/osublake/pen/c8723bcdba9df92bc11fcfe062e01de8?editors=0010

Hello once again, GreenSock community! I'm currently working on a project that uses the scroll to kick the animations running. One effect that I would like to apply is that even the user stops scrolling, there's still some movement on the screen. Below is my CodePen example. My problem is I'm having some occasional performance issues and animation lapses. Like for example, one of the boxes sometimes duplicates itself in half and would scroll across the page vertically in a short period of time. So what I did was convert all left/top/etc properties into 3d space translation, but still I'm having those issues. How would I further improve this? I'm thinking that there is something wrong with me using the setInterval function. Also to clear things up, this line: var prog = (1-0.05) * boxTween.progress() + 0.05 * pos; This line enables me to "lerp" the Timeline's progress over a period of time to the current scroll position. I got this from another CodePen (http://codepen.io/ma77os/pen/KGIEh) and I thought that I could use the solution he used. Am I doing something wrong? Any suggestions? Thanks in advance! Hi-five, Phenelo

This is actually a lot more complex than it may seem due to all the magic GSAP does under the hood to normalize behavior across browsers and manage transforms and offsets. Not impossible, but very tricky. And as far as I can tell, it'd be impossible to do without breaking existing code unless we create an entirely different special property for this sort of thing. That's less than ideal. Another factor is that this is a very uncommon request. If we kept hearing from people that they wanted to animate the origin, it'd help prove that it's worth us investing all the time into changing the current behavior (and adding the feature). I think I remember maybe one other person requesting it in the last 2 years. That doesn't mean it doesn't have value of course. But other enhancements would deliver more value to more people, so it's hard to justify putting those off to work on this very tricky change that almost nobody is asking for - see what I mean? Again, it's a totally valid request - I don't mean to diminish it at all. So it's pretty unlikely that we'll attack this change anytime soon. I wish we had a more positive answer for you But don't worry - we're hard at work trying to innovate and push things forward with the platform (as evidenced by the email that members got today, wink wink).

I bet you're looking for RoughEase because it can give you a randomized flickering effect. Here's an example: http://codepen.io/anon/pen/YwxqgK Here are the docs: http://greensock.com/docs/#/HTML5/GSAP/Easing/RoughEase/ Sample code: TweenMax.to("#box", 3, {opacity:0, ease:RoughEase.ease.config({points:50, strength:2, clamp:true})}); Feel free to mess with the settings to get exactly the effect you want.

Hello Tahir Ahmed, What about animating the progress() or time() of your stepped tween, so you can apply any other easing you want: var myTween = TweenMax.fromTo('div', 4, { position: 'absolute', top: '10%', left: '50%', yPercent: -100, xPercent: -50, width: 100, height: 100, backgroundColor: '#cc0', paused:true // don't forget to add a paused state to your first tween }, { top: '100%', ease: SteppedEase.config(20) }); // Tween the progress() and apply a different easing TweenMax.to(myTween, 4, { ease: RoughEase.ease.config({ template: Expo.easeOut, strength: 0.2, points: 20, taper: 'none', randomize: false, clamp: true }), progress: 1 // animate the progress of your 'myTween' instance }); Since GSAP can animate any numerical JavaScript property or object. It can also tween the progress() and time() of other tweens, when you store those other tweens in a variable. And then just place that variable in your tween target, since it accepts DOM selectors, array, and objects target : Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Reference: progress(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/ time(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/time/ to(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/ fromTo(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/fromTo/ See if that helps!

Not sure what you might be referring to, maybe overwrite? But the problem is your repeat is going to animate between its previous state, and not its default state like you were expecting. So if the previous animation was at a scale of 1.2 when the repeat tween starts, its going to repeat back and forth between 1.2 and 0.8. Adding in an extra to tween with the default values for the repeat should normalize your animation.

Hi, Usually we don't dedicate support for third party plugins that runs over GSAP, so it's appreciated when the part of the code that's giving problems is posted (although we always prefer a reduced live sample in jsfiddle or codepen). I copied your code and is working for me, you can see it here: http://codepen.io/rhernando/pen/jbHJE Please fork that and adjust it, if necessary, to your scenario or mention if something is not working as expected. By looking at your code I noticed that you added the js files inside the body tag, you better add them in the header tag and the script tag with your code at the bottom of the body tag, like that you'll be sure that every library and plugin will be loaded when the code inside the document.ready() declaration is executed. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>SUPERSCROLLORAMA - Simple Demo #2</title> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <style> /*STYLE HERE*/ </style> <!-- SCRIPT FILES HERE --> <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.superscrollorama.js"></script> </head> <body class="simple-demo"> <div id="content-wrapper"> <div id="examples-1"> <!-- --> </div> </div> <!-- FINALLY YOUR SCRIPT HERE --> <script> $(document).ready(function() { // This example adds a duration to the tweens so they are synced to the scroll position var controller = $.superscrollorama(); // amount of scrolling over which the tween takes place (in pixels) var scrollDuration = 200; // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#img1'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img2'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img3'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img4'), .5, {css:{opacity: 0}}), scrollDuration); }); </script> </body> </html> Perhaps this solves the issue. Rodrigo.

Sorry - now I'm here again. I sucessfully loaded the Web Font Loader. But as soon as I include this script the spacings between the words dissapear when using splitText.. My code at the moment is as follows: // log to body function log() { var div = document.createElement('div'); div.textContent = Array.prototype.slice.call(arguments); document.body.appendChild( div ); } WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ] }, active: function() { log('google fonts active'); }, inactive: function() { log('font inactive'); }, loading: function() { log('loading google font'); }, fontactive: function(fontFamily, fontDescription) { log( 'google font active', fontFamily, fontDescription ); }, fontinactive: function(fontFamily, fontDescription) { log( 'google font inactive', fontFamily, fontDescription ); } }); //split greetings txt into words var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words, chars"}); //create a TimelineLite instance - animation var tl = new TimelineLite({paused:true, delay:1}); tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"}); tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1); tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2"); window.onload = function() { tl.play(); }; Also I'm not sure how to acheive the correct order for loading things now. How do I start the timeline at the correct time? The setup of timeline and splitText is happening as soon as the DOM is ready. I load the js-file containing the code above just before </body> I do realise I need to move the splitText code into the "active" callback from WebFontLoader but this gives me errors. "split" then becomes undefined... Niklas This is my html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>Christmas Card</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'> <link rel='stylesheet' href='normalize.css' type='text/css' media='all'> <link rel='stylesheet' href='styles.css' type='text/css' media='all'> </head> <body> <div id="container"> <div id="snow"></div> <img id="bkg-img" src="images/bkg.jpg"> <img id="firtreeBells" src="images/firtree-bells-opt.png"> <div id="greetingsTxt">Merry Christmas &<br>a Happy New Year from Company Name</div> <img id="logo" src="images/logo.png"> </div> <script type="text/javascript" src="js/greensock.js">></script> <script type="text/javascript" src="js/animation.js">></script> <script type="text/javascript" src="js/snow-fittext.js"></script> <script type="text/javascript">window.fitText( document.getElementById("greetingsTxt"), 0.8 );</script> </body> </html>

Thanks for the quick reply Rhernando. But unfortunately it didn't work. I pasted your code but only 1 of the 2 images gets an animation. I tried placing them in different div's or giving them other names but nothing works. Can you please take a look at my code. Thanks, Frans My html is now: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>SUPERSCROLLORAMA - Simple Demo #1</title> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body class="simple-demo" > <div id="content-wrapper"> <div id="examples-1"> <h2 id="fly-it"><img src="img/image1.png"></h2> <h2 id="fly-it2"><img src="img/image2.png"></h2> </div> </div> <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { var controller = $.superscrollorama(); // individual element tween examples //This image will come from the left side of the screen controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {left:1000, ease:Quad.easeInOut})); //This image will come from the right side of the screen controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {left:-1000, ease:Quad.easeInOut})); }); </script> </body></html>

Wow, you've got good timing. I was just working on this last night and today. I have attached an updated version of EasePack that includes RoughEase. Please note that in order to make it more user-friendly, the way you pass in customization parameters is different than it was in AS3 (the AS flavors are getting updated with the new API style too): instead of accepting 6+ regular function parameters and trying to remember which one was for which property, you now pass in a single generic object {} with any properties that you want to customize. For example: var rough = new RoughEase({strength:3, points:50, clamp:true}); TweenLite.from(element, 2, {opacity:0, ease:rough}); And it uses the standard config() method now from v12, just like SteppedEase or SlowMo or Back or Elastic: TweenLite.to(element, 2, {x:500, ease:RoughEase.ease.config({strength:3, points:50}) }); I've included updated docs in the zip attached. I'd love to hear what you think. RoughEase.zip

Hi that can be a fairly tricky endeavor. Fortunately the concepts needed to accomplish this have been explained in great detail in other forum posts. Please first read this post: http://forums.greens...7932#entry17932 In short, the trick is to 1: figure out where the throw would normally land 2: force that value to snap to the nearest 30 degree increment 3: create a ThrowProps tween that uses your desired ending value as the min and max value. Below is the code for forcing the dial to land on the nearest 90 degree value (for easy testing purposes) import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.display.*; trace(TweenLite.version); TweenPlugin.activate([ThrowPropsPlugin]); var RAD2DEG:Number = 180 / Math.PI; var t1:uint, t2:uint, r1:Number, r2:Number, offset:Number; dial.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(dial); offset = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x); r1 = r2 = dial.rotation; t1 = t2 = getTimer(); dial.addEventListener(Event.ENTER_FRAME, enterFrameHandler); dial.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function enterFrameHandler(event:Event):void { r2 = r1; t2 = t1; var newOffset:Number = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x); dial.rotation += (offset - newOffset) * RAD2DEG; offset = newOffset; r1 = dial.rotation; t1 = getTimer(); } function mouseUpHandler(event:MouseEvent):void { dial.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); dial.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); var time:Number = (getTimer() - t2) / 1000; var dif:Number = dial.rotation - r2; if (dif != dif % 180) { dif += (dif < 0) ? 360 : -360; } var rVelocity:Number = dif / time; var duration:Number = ThrowPropsPlugin.calculateTweenDuration(dial, {throwProps:{rotation:rVelocity, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 2); //figure out where it'll land normally var landingValue:Number = dial.rotation + ThrowPropsPlugin.calculateChange(rVelocity, Strong.easeOut, duration); trace("landingValue = " + landingValue); //normalize the landingValue to the nearest 90 degree increment //change to 30 or whatever you want landingValue = snapTo(landingValue, 90); trace("landingValue snapped to nearest 90 = " + landingValue); //do a throwProps tween but force it to land on the landing value by setting min/max values ThrowPropsPlugin.to(dial, {throwProps:{rotation:{velocity:rVelocity, min:landingValue, max:landingValue}, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 0); } function snapTo(myNum:Number, increment:Number):Number{ return (((myNum + (increment / 2)) / increment) >> 0) * increment; } CS5 Fla attached Or you can just paste the code into the CS4 rotation example from the ThrowProps Page In either case use your own GreenSock bonus files that include ThrowPropsPlugin.as throwProps_rotation_snap.zip

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); } });

Aha, it sounds like you were expecting it to increment the value by one integer each update, but that isn't how the engine works (nor should it) because that could really bog down the processor unnecessarily. Let's take a simple example and say you've got a swf that's running at 30fps and you want to tween mc.x from 0 to 300 with a linear ease (again, to keep it simple). That means it should move 10 pixels per frame refresh (not 1). And if you were tweening from 0 to 3000, that'd be 100 pixels per frame. Now let's say there are a lot of graphics flying around and the Flash Player can't render them at 30fps, dropping instead to 10fps for a little while during a complex sequence. The engine dynamically figures out EXACTLY what the values should be on each frame according to the elapsed time and total duration. Now do you see why the values you saw tracing out were normal? You shouldn't write your code assuming that any particular value will be hit exactly during the tween (although the beginning and ending values will always be perfect). The Flash Player may decide to run a garbage collection routine mid-tween, causing a delay which in turn would make the values jump over a larger chunk (correctly). Your code should probably look for when the value passes by some threshold. You could record the value on each onUpdate and compare it to the new one. Kinda like: var prevVal:Number = (mc.rotation + 360) % 360; //normalize it from 0-360 so we don't need to worry about negative values var triggerVal:Number = 55; //arbitrary angle that we want to sense when it goes past TweenLite.to(mc, 5, {rotation:270, onUpdate:onTweenUpdate}); function onTweenUpdate() { var newVal:Number = (mc.rotation + 360) % 360; if ((newVal >= triggerVal && prevVal < triggerVal) || (newVal <= triggerVal && prevVal > triggerVal)) { trace("TRIGGER!"); } prevVal = newVal; }

GSAP 3 Cheat Sheet @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap'); ::selection { background-color: #88ce04; color: white; } body { background: #111; color: white; font-family: "Signika Negative", sans-serif; font-size: 19px; line-height: 1.4; font-weight: 300; margin: 0; text-align: center; } body > * { text-align: left; } a { font-weight: 400; color: #88ce02; text-decoration: none; } a:hover, a:hover .ipsPager_type { color: #a7ff00; text-decoration: underline; } .pdf-icon { width: 32px; vertical-align: bottom; display: inline-block; margin-bottom: 12px; } .ipsCode { background: #fafafa; padding: 15px !important; border: 0 !important; border-left: 4px solid #5e9815 !important; clear: both; direction: ltr; word-wrap: normal; } .prettyprint { font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; font-weight: normal; border: none; line-height: 18px; margin: 0 0 15px; background: #262626; border-radius: 6px; color: #ccc; padding: 12px 18px; } .prettyprint .str { color: #EC7600 } .prettyprint .kwd { color: #93C763 } .prettyprint .com { color: #999999 } .prettyprint .typ { color: #72a5d8 } .prettyprint .lit { color: #FACD22 } .prettyprint .pun { color: #F1F2F3 } .prettyprint .pln { color: #F1F2F3 } .prettyprint .tag { color: #8AC763 } .prettyprint .atn { color: #E0E2E4 } .prettyprint .atv { color: #EC7600 } .prettyprint .dec { color: purple } .prettyprint ol, .prettyprint ul { margin: 0px; padding: 0px; margin-left: 40px } .prettyprint ol li, .prettyprint ul li { margin: 0px; padding: 0px } .prettyprint ol.linenums { margin-top: 0; margin-bottom: 0 } .prettyprint li.L0, .prettyprint li.L1, .prettyprint li.L2, .prettyprint li.L3, .prettyprint li.L4, .prettyprint li.L5, .prettyprint li.L6, .prettyprint li.L7, .prettyprint li.L8, .prettyprint li.L9 { color: #777; list-style-type: decimal; padding-left: 20px; padding-right: 20px; margin-left: -40px } .prettyprint li.L1, .prettyprint li.L3, .prettyprint li.L5, .prettyprint li.L7, .prettyprint li.L9 { background: #2a2a2a } .prettyprint.wrap { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word } .prettyprint.linenums { padding: 12px 0px; margin: 0 0 0 25px } .post_wrap .prettyprint { margin: 10px 0; } .prettyprint .pln { font-size: 15px; } .flexRow { display: flex; } .flexRow > * { flex-grow: 1; } .flexRow > *:not(:last-child) { margin-right: 15px; } .cheat-header.cDarkContent { display: inline-block; padding-left: 144px; min-height: 146px; position: relative; } .cheat-header h1 { font-size: 3rem; margin: 0; font-weight: 400; } .cheat-header .logo { position: absolute; top: 10px; left: 20px; width: 112px; } .cheat-header ul { margin: 0; display: inline-block; vertical-align: top; padding-left: 0; margin-right: 20px; } .cheat-header li { list-style: none; } .cheat-header ul:first-child { padding-left: 0; } .cheat-header .pipe { color: #777; } .cheat-header .cheat-container { display: block; } pre.prettyprint { margin-bottom: 10px; } .cheat-container { padding: 10px; display: flex; } .cheat-container > * { flex-grow: 1; } .cheat-container > *:not(:last-child) { margin-right: 10px; } .cheat-container h2 { text-align: left; color: white; font-weight: 300; font-size: 2em; margin-top: 0; margin-bottom: 4px; } .cheat-content a:hover { color: white; } .cheat-content .ipsCode a:hover { color: #88ce02; } footer p { margin: 0 auto 2em; text-align: center; } footer img { vertical-align: middle; width: 100px; margin-left: 15px; } @media (max-width: 1659px), print { .cheat-content { display: flex; max-width: 100vw; flex-wrap: wrap; } .cheat-content > * { flex-grow: 1; } .cheat-container { display: contents; } .cheat-container:not(:first-child) h2 { margin-top: 3rem; } .cheat-container > * { padding: 10px; } .cheat-header > .cheat-container > * { padding: 0; } .cheat-container > *:not(:last-child) { margin-right: 0; } } @media (max-width: 648px) { .cheat-header .logo { position: static; display: block; margin: 0 auto; } .cheat-header.cDarkContent { padding-left: 10px; } .column { max-width: calc(100% - 20px); } .cheat-container pre { overflow: auto; } } GSAP 3 Cheat Sheet .cls-1,.cls-3{fill:#111;}.cls-1{stroke:#999;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}.cls-2{fill:#88ce02;} Most code is linked to the appropriate page in the Docs Links: Get started | Install | Forums | Tips | Learning | CodePen | Club Basics // "to" tween (animate to provided values) gsap.to(".selector", { // selector text, Array, or object x: 100, // any properties (not limited to CSS) backgroundColor: "red", // camelCase duration: 1, // seconds delay: 0.5, ease: "power2.inOut", stagger: 0.1, // stagger start times paused: true, // default is false overwrite: "auto", // default is false repeat: 2, // number of repeats (-1 for infinite) repeatDelay: 1, // seconds between repeats repeatRefresh: true, // invalidates on each repeat yoyo: true, // if true > A-B-B-A, if false > A-B-A-B yoyoEase: true, // or ease like "power2" immediateRender: false, onComplete: myFunc, // other callbacks: // onStart, onUpdate, onRepeat, onReverseComplete // Each callback has a params property as well // i.e. onUpdateParams (Array) }); // "from" tween (animate from provided values) gsap.from(".selector", {fromVars}); // "fromTo" tween (define both start and end values) gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVars // set values immediately (no animation) gsap.set(".selector", {toVars}); Timelines // Create a timeline let tl = gsap.timeline({ delay: 0.5, paused: true, // default is false repeat: 2, // number of repeats (-1 for infinite) repeatDelay: 1, // seconds between repeats repeatRefresh: true, // invalidates on each repeat yoyo: true, // if true > A-B-B-A, if false > A-B-A-B defaults: { // children inherit these defaults duration: 1, ease: "none" }, smoothChildTiming: true, autoRemoveChildren: true, onComplete: myFunc, // other callbacks: // onStart, onUpdate, onRepeat, onReverseComplete // Each callback has a params property as well // i.e. onUpdateParams (Array) }); // Sequence multiple tweens tl.to(".selector", {duration: 1, x: 50, y: 0}) .to("#id", {autoAlpha: 0}) .to(elem, {duration: 1, backgroundColor: "red"}) .to([elem, elem2], {duration: 3, x: 100}); // position parameter (controls placement) tl.to(target, {toVars}, positionParameter); 0.7 // exactly 0.7 seconds into the timeline (absolute) "-=0.7" // overlap with previous by 0.7 sec "myLabel" // insert at "myLabel" position "myLabel+=0.2" // 0.2 seconds after "myLabel" "<" // align with start of most recently-added child "<0.2" // 0.2 seconds after ^^ "-=50%" // overlap half of inserting animation's duration "<25%" // 25% into the previous animation (from its start) Control methods // retain animation reference to control later let anim = gsap.to(...); // or gsap.timeline(...); // most methods can be used as getters or setters anim.play() // plays forward .pause() .resume() // respects direction .reverse() .restart() .timeScale(2) // 2 = double speed, 0.5 = half speed .seek(1.5) // jump to a time (in seconds) or label .progress(0.5) // jump to halfway .totalProgress(0.8) // includes repeats // when used as setter, returns animation (chaining) // other useful methods (tween and timeline) .kill() // immediately destroy .isActive() // true if currently animating .then() // Promise .invalidate() // clear recorded start/end values .eventCallback() // get/set an event callback // timeline-specific methods // add label, tween, timeline, or callback .add(thing, position) // calls function at given point .call(func, params, position) // get an Array of the timeline's children .getChildren() // empties the timeline .clear() // animate playhead to a position linearly .tweenTo(timeOrLabel, {vars}) // ^^ with both start and end positions .tweenFromTo(from, to, {vars}) Eases // see greensock.com/ease-visualizer ease: "none" // no ease (same as "linear") // basic core eases "power1", "power2", "power3", "power4", "circ", "expo", "sine" // each has .in, .out, and .inOut extensions // i.e. "power1.inOut" // expressive core eases "elastic", "back", "bounce", "steps(n)" // in EasePack plugin (not core) "rough", "slow", "expoScale(1, 2)" // members-only expressive plugins CustomEase, CustomWiggle, CustomBounce ScrollTrigger scrollTrigger: { trigger: ".selector", // selector or element start: "top center", // [trigger] [scroller] positions end: "20px 80%", // [trigger] [scroller] positions // or relative amount: "+=500" scrub: true, // or time (in seconds) to catch up pin: true, // or selector or element to pin markers: true, // only during development! toggleActions: "play pause resume reset", // other actions: complete reverse none toggleClass: "active", fastScrollEnd: true, // or velocity number containerAnimation: tween, // linear animation id: "my-id", anticipatePin: 1, // may help avoid jump snap: { snapTo: 1 / 10, // progress increment // or "labels" or function or Array duration: 0.5, directional: true, ease: "power3", onComplete: callback, // other callbacks: onStart, onInterrupt }, pinReparent: true, // moves to documentElement during pin pinSpacing: false, pinType: "transform" // or "fixed" pinnedContainer: ".selector", preventOverlaps: true, // or arbitrary string once: true, endTrigger: ".selector", // selector or element horizontal: true, // switches mode invalidateOnRefresh: true, // clears start values on refresh refreshPriority: 1, // influence refresh order onEnter: callback // other callbacks: // onLeave, onEnterBack, onLeaveBack, onUpdate, // onToggle, onRefresh, onRefreshInit, onScrubComplete } Other Plugins // Register GSAP plugins (once) before using them gsap.registerPlugin(Draggable, TextPlugin); // Available plugins Draggable, DrawSVGPlugin*, EaselPlugin, Flip, GSDevTools*, InertiaPlugin*, MorphSVGPlugin*, MotionPathPlugin, MotionPathHelper*, Physics2DPlugin*, PhysicsPropsPlugin*, PixiPlugin, ScrambleTextPlugin*, ScrollToPlugin, ScrollTrigger, SplitText*, TextPlugin // * available to Club GSAP members. greensock.com/club Installation // Import and register GSAP (ES Modules) import { gsap } from "gsap"; import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin); // Import and register GSAP (UMD/CommonJS) import { gsap } from "gsap/dist/gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin); Utility methods // accessible through gsap.utils.foo() checkPrefix() // get relevant browser prefix for property clamp() // clamp value to range distribute() // distribute value among and array getUnit() // get unit of string interpolate() // interpolate between values mapRange() // map one range to another normalize() // map a range to the 0-1 range pipe() // sequence function calls random() // generates a random value selector() // get a scoped selector function shuffle() // shuffles an array in-place snap() // snap a value to either increment or array splitColor() // splits color into RGB array toArray() // convert array-like thing to array unitize() // adds specified unit to function results wrap() // place number in range, wrapping to start wrapYoyo() // place number in range, wrapping in reverse Nesting Timelines function scene1() { let tl = gsap.timeline(); tl.to(...).to(...); // build scene 1 return tl; } function scene2() { let tl = gsap.timeline(); tl.to(...).to(...); // build scene 2 return tl; } let master = gsap.timeline() .add(scene1()) .add(scene2(), "-=0.5") // overlap slightly Miscellaneous // Get the current value of a property gsap.getProperty("#id", "x"); // 20 gsap.getProperty("#id", "x", "px"); // "20px" // Set GSAP's global tween defaults gsap.defaults({ease: "power2.in", duration: 1}); // Configure GSAP's non-tween-related settings gsap.config({ autoSleep: 60, force3D: false, nullTargetWarn: false, trialWarn: false, units: {left: "%", top: "%", rotation: "rad"} }); // Register an effect for reuse gsap.registerEffect({ name: "fade", effect: (targets, config) => { return gsap.to(targets, { duration: config.duration, opacity: 0 }); }, defaults: {duration: 2}, extendTimeline: true }); // Now we can use it like this gsap.effects.fade(".box"); // Or directly on timelines tl.fade(".box", {duration: 3}) // Add listener gsap.ticker.add(myFunction); function myFunction(time, deltaTime, frame) { // Executes on every tick after // the core engine updates } // To remove the listener later... gsap.ticker.remove(myFunction); // faster way to repeatedly set property than .set() const setX = gsap.quickSetter("#id", "x", "px"); document.addEventListener("pointermove", e => setX(e.clientX) ); For an all access pass to premium content - JOIN CLUB GSAP