It seems there is a big API change (or bug) in version 1.12 ... following case: you have onComplete handlers in tweens, which are added into a timeline. You pause this timeline, jumping to the end of it with supressEvents set to false. In version 1.11 the onComplete handlers were fired, in 1.12 they are not. I have made this little fiddle to demonstrate the case: http://jsfiddle.net/3pTrs/7/

As you can see, the alert in the onComplete handler of the second tween won't be called.

The code below generate this error

Error: Permission denied to access property 'nodeType'
.../TweenMax.js
Line 5700

The error appears with ScrolToPlugin and TweenMax 1.9.7 or 1.9.8, it works fine with 1.9.6.

    $('#nav-main a').on('click', function(e) {
        var link = $(this);
        var id = link.attr('href');
        var target = $(id);
        var offset = target.offset();

        TweenMax.to(
            window,
            1,
            {
                scrollTo:{y:offset.top},
                ease:Power2.easeInOut
            }
        );

        e.preventDefault();
    });

I've found that sometimes the scale tweening loses the proportions for some reason.

If you give a good test to this mini demo, you will see that sometimes, when the background circle starts growing, the circle becomes an egg-ish shape instead of being a full circle. (You have to move the mouse in-out rhythmically to see the problem)

http://heartcode.github.com/greensock-js-examples/scaling-button/

Kind Regards,
Rob

As discussed here: http://forums.greensock.com/topic/7429-tweening-inherited-values/

Currently, inherited styles of the children of the tweened element don't animate.

I posted this in the green sock forums, but am cross-posting here.
I want to do a "slide animation" on two absolutely positioned elements simultaneously, so I set this as the css prop for the animation: { x: '-100%', z:1 }
What I actually see in the inspector is this: -webkit-transform: translate3d(-100px, 0px, 1px); (I am using Chrome)

The % gets changed to px. Is there a way to preserve this?

Hi,

I am referring to this post on the GreenSock forums:
http://forums.greensock.com/topic/7125-oncomplete-doesnt-fire/#entry35243

Description:
When I teill scrollTo to scroll to a target which is not within reach, the onComplete() event doesn't get fired.

Here is a testcase:
http://fiddle.jshell.net/4UcfT/10/
http://fiddle.jshell.net/4UcfT/10/show/

I just heard from Jack that there is a good reason for this: At the moment, the script thinks that a user interaction is responsible for the fact that the current value varies from the calculated value (at a given point within the tween).

Might be good if this edge-case get's noted by the scrollTo plugin.

Thanks for your awesome work. I love it.

Cheers,
Daniel

Would be great if this could be downloaded via bower!

bower install greensock fails

bower download      https://github.com/greensock/GreenSock-JS/archive/1.11.2.tar.gz
bower extract       greensock#1.11.2 archive.tar.gz
bower extract       greensock#* archive.tar.gz
bower EMALFORMED    Failed to read /var/folders/..../bower/greensock-4666-CpOcE9/bower.json

Additional error details:
Unexpected token

Even after the commit "Fixed bower.json quote" 19 hours ago
fb5725f

There is a delay before it works ?

I'm having problems with the null transform hack and TweenMax. When z has a value of 0, both in the original style or when set with TweenMax.set, the value is left out when setting some of the other tansform-settings causing the matrix3d to become a matrix instead. Can we read if the value is present even if the value is 0 and force it to a matrix3d?

currently:
TweenMax.set(el,{ scale:1.2, z:0}); --> matrix
TweenMax.set(el,{ scale:1.2, z:1}); --> matrix3D

Hi,
is there any ruble for an autocomplete in Aptana Studio 3?

Best, Boris

I am getting this error in the console:

Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present. 

My code is simple as following:

$(document).ready(function($) {
    var controller = new ScrollMagic()

    $(document).on("click", "nav a[href^=#]", function (e) {
        var id      = $(this).attr("href"),
            $elem   = $(id)

        if ($elem.length > 0) {
            e.preventDefault()
            TweenMax.to(window, 0.5, {scrollTo: {y: $elem.offset().top}})

            if (window.history && window.history.pushState) {
                history.pushState('', document.title, id)
            }
        }
    });
})

and the markup is very simple:

  ...
  <body>

    <main>
      <section id="intro">
        <h1>This is who we are</h1>
        <h2>The Manifesto</h2>
        <p>Scroll down to play</p>
      </section>
    </main>
    <nav>
      <ol>
        <li><a href="#intro">Intro</a></li>
      </ol>
    </nav>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/js/vendor/jquery/dist/jquery.min.js"><\/script>')</script>

    <script src="/js/vendor/gsap/src/minified/jquery.gsap.min.js"></script>
    <script src="/js/vendor/gsap/src/minified/TweenMax.min.js"></script>
    <script src="/js/vendor/ScrollMagic/js/jquery.scrollmagic.min.js"></script>

    <script src="/js/main.js" type="text/javascript"></script>
  </body>
  ...

Can you explain this?

Please consider distributing "source maps" for your minified files. These are new to the web-world to allow debugging cryptic minified files against the uncompressed file. I'm sure there will never be errors in your JS ;), but perhaps a dev would like to see how your scripts interact on a live site. Chrome & soon FF support their usage.

https://github.com/ryanseddon/source-map/wiki/Source-maps:-languages,-tools-and-other-info#articles-about-source-maps

Using

• KineticJS 5.0.0
• KineticPlugin 0.5.0

Problem

When I tween x and y properties for Kinetic.Groups, with e.g.

TweenMax.to(someGroup, 2, { kinetic: { x: "+=40" }});

I get

Uncaught TypeError: Cannot call method 'replace' of undefined kinetic-v5.0.0.js:6857
Kinetic.Util.addMethods.find kinetic-v5.0.0.js:6857
window._gsDefine.plugin.init KineticPlugin.js:244
p._initProps TweenMax.js:6121
p._init TweenMax.js:6085
p.render TweenMax.js:213
p.render TimelineMax.js:259
p.render TweenMax.js:5783
Animation._updateRoot TweenMax.js:5904
p.dispatchEvent TweenMax.js:5261
_tick

It works without error for Kinetic.Image though. Also if I change the property name like this

TweenMax.to(someGroup, 2, { kinetic: { setX: "+=40" }});

the group tweens without errors.

The plugin needs a bit of a cleanup. They have eliminated many setters and getters in KineticJS, so you can do without the option of setX, and just have it x. That's a method now.

When looking at TweenMax object in Devtools they appear as r() for TweenMax and s() for TimelineMax.

The Functions can be easily names so they appear in their right names in the console, either by not using anonymous functions (i.e. using TweenMax = function TweenMax()) or by setting the 'name' property of the function.

See here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

First of all - great job for the draggable code working like a charm on so many devices.

I found a major problem with Windows8-Touch-devices calculating with subpixels. So the position is noch 280 but 280.34

Within the draggable code there is a check if the item is moved or not to determine click or drag:

if (self.x !== x || (self.y !== y && !rotationMode)) {

those will fail because self.c is 280 and not equal 280.34.

I solved the problem by adding round right before this check:

x = Math.round(x); /// HACK for Win Touch
y = Math.round(y);

now it works perfect also on those devices.

Im using SplitText to stagger letters animation. I create the tweens on-the-fly and don't precalculate anything.

When staggering large texts with thousands of letters the initial creation of the tween takes factorially longer as the text is longer and hogs the browser.

After some investigation with Chrome Devtools Timeline I saw that TweenMax does "getStyle" and "setStyle" operations on each element synchronously, which means that it invalidates the layout on each "set" which causes a recalculation of the layout and a reflow on each "get", which in turn takes longer as you have more letters in the text.

Devtools even states that "Forced synchronous layout is a possible performance bottleneck."

The quick and dirty solution for me was to set "immediateRender:false" on some of the animations which took this operation down to several milliseconds.

But I think a simple change in tweenmax code will make this redundant - do all the "gets" synchronously, and on requestAnimationFrame do all the "sets".

here's a demo: http://codepen.io/tombigel/pen/zylnA

I'm not exactly sure what your stance is on setting non-numeric values with TweenLite, but I noticed that setting the SVG property clip-path works flawlessly in Chrome and it doesn't in Firefox. Demo

TweenLite.set('#box', {'clip-path':'url(#circle-clip)'})

After tweening a transform, then resetting it's transform using jQuery, the new transform values are not pulled in by TweenMax. The below only tweens once instead of looping. If we comment out the jQuery css line and uncomment the TweenMax.set lines, it works as expected. Example: http://codepen.io/anon/pen/dLgax

$(document).ready(function() {
  var funcScale = function() {
    $('.square').css('transform', 'scale(1)');
    //TweenMax.set($('.square'), {
    //  'transform': 'scale(1)'
    //});

    TweenMax.to($('.square'), 1, {
      'transform': 'scale(2)',
      'onComplete': function() {
        TweenMax.delayedCall(0.5, funcScale);
      }
    });   
  };

  funcScale();
});

The following code works nicely with TweenLite/TimelineLite but something fails for TweenMax/TimelineMax:

<!DOCTYPE html>
<html>
    <head>
        <title>TimelineMax tick problem</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="TimelineMax.min.js"></script>
        <script type="text/javascript" src="TweenMax.min.js"></script>
        <script type="text/javascript">
            function init() {
                var ctx = document.getElementById('cnv').getContext('2d');
                var img = new Image();
                img.xpos = 5;
                img.ypos = 5;
                var anim = function() {
                    ctx.clearRect(0, 0, 201, 150);
                    ctx.drawImage(img, img.xpos, img.ypos);
                };
                img.addEventListener('load', function() {
                    console.log('image loaded!');
                    TweenMax.ticker.addEventListener('tick', anim);
                });
                img.src = "http://www.flashbit.net/fb_32px.png";

                var timeline = new TimelineMax({repeat:-1});
                timeline.to(img, 0, {xpos:0, ypos:20})
                    .to(img, 0.4, {xpos:20, ypos:50})
                    .to(img, 2.5, {xpos:20, ypos:75, ease: Linear.easeNone})
                    .to(img, 0.3, {xpos:30, ypos:100})
                    .play();
            };
        </script>
    </head>
    <body onload="init()" style="background-color: #ccc;">
        <canvas id="cnv" width="200" height="150" style="background-color: #fff;">Canvas not supported!</canvas>
    </body>
</html>

p._kill = function(vars, target) {
return this._enabled(false, false);
};

    p.kill = function(vars, target) {
        this._kill(vars, target);
        return this;
    };

these methods in 'Animate', arguments are not used.

We're working on a project that uses Greensock to run some light animations, one being a zoom in function. Overall it works great in most browses.

When we zoom in function on Safari 5, it gets blurry and pixelated. See this screenshot: http://cl.ly/image/2N0f3i2q0t0I

Is there a fallback for this issue?

Hi,

I recently started using https://github.com/stephenplusplus/grunt-bower-install which is found in some of the Yeoman generators. All this does is inserts any script tags into your index.html file based on the packages bower.json file you're pulling. The problem is that the "main" key is pointing to a minified version of GSAP. I'm curious if this is intended or not? https://github.com/greensock/GreenSock-JS/blob/master/bower.json#L9 I think it makes more sense to use the unminified version for two reasons.

1. During development, I want to be able to get as much debug info as I can.
2. Those of us using Yeoman/Grunt/Gulp/etc tools use minification to compress and concat all of the scripts into one so we wouldn't necessarily want to minify an already minified file. (obviously this has less weight that number one)

Could this change be made to point to the uncompressed version? Or if anyone could give me a good reason why it shouldn't that'd be just as helpful!

Feel free to let me know if you'd like me to simply create a pull request.

Thanks!

Hi guys. Could you please retag 1.11.1 to commit 13b0? This tag is now pointing to 4819, where bower.json still has 1.11.0 version.
Because of this Bower prints a warning every time, and our build server marks all the builds as 'warning - partially succeeded'.

I noticed that clearProps doesn't override a currently playing animation like setting a value does.

//start
tl.to("#redBox", 10, {
    x: 1000,
    ease: Linear.easeNone
},0);
//override and stop (NOPE)
tl.set("#redBox", {clearProps: 'x'}, 1);

The second tween (clearProps) does nothing even if they operate on the same tween+property. Instead here:

//start
tl.to("#blueBox", 10, {
    x: 1000,
    ease: Linear.easeNone
},0);
//override and stop (YEP!)
tl.set("#blueBox", {x: 0}, 1);

The second tween (explicitly sets x) stops the first, as expected.

Is this expected behavior? PEN here

On Firefox, the return of getBoundingClientRect is a DOMRect. This object has no setter method for width property.

I`m getting errors at this line:
https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/utils/Draggable.js#L1534

I resolved changing to: if( r.width===undefined ) at the line before.

Why all the namespace code-magic? it makes it nearly impossible to port this otherwise great tool to newer systems like browserify or webpack. You should really consider dropping some of the actionscript/java legacy and move towards a CommonJS compatible script without messing around with window this and com.greensock.core that. Not only is it really difficult to follow, it also takes up a lot of valuable coding space.

I’d like to do a simple require('TweenLite') but... how? I’ve been hacking around with the source but it’s a dependency mess right now. No offense.

It shouldn’t be a great deal for you that knows the inner workings of f.ex https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenLite.js#L74-L95

Maybe just don’t do your own dependency management, instead use requireJS or something else for development and then wrap it up in nice little packages for distribution...?

Let me know if I can help.

Shouldn't the following work? I have to use a placeholder object + onUpdate

var $box = $('.box')
$box.css('width', '50px');
TweenLite.to($box, 1, {'width': '200px'});

also tried
TweenLite.to($box.get(0), 1, {'width': '200px'});
and omitting the px etc

1. onStart and onComplete handlers are not called if using TimelineLite solely to call functions

2. TimelineLite.restart(true, true) or TimelineLite.seek(0) does not call functions on replay.

Can be worked around by doing anything that causes the Timeline to have > 0 duration. Obviously an edge-case, but never getting onStart threw me.

I remember seeing GSAP reading and then writing CSS values even when I thought it was unnecessary, like with TweenLite.set(el, {opacity: 0.5}), so I wanted to investigate.

What I found was a much worse situation than imagined. Try this pen and open Chrome's Timeline view, it's a simple two-button demo that toggles a transform on the clicked element. I used plain event listeners to avoid any possible jQuery noise.

var gset = false;
document.getElementById('gsap').onclick = function() {
  TweenLite.set(this, {scale: gset?1:2});
  gset = !gset;
};
var dset = false;
document.getElementById('cssom').onclick = function() {
  this.style.transform = 'scale('+(dset?1:2)+')';
  dset = !dset;
};

The CSSOM activity is plain and simple:

TweenLite instead generates dozens of animationFrames, composite calls and a few paints, it doesn't fit in a single screenshot:

I figured TweenLite has to do more behind the scenes than any direct CSSOM call, but all that activity might be a bit too much and is probably unintended.

Both the transitions cage match and CSS3 page throw JS errors in Opera 12.15 (the latest version for OS X).

Both fail in TweenMax.min.js:1152 with Unhandled Error: Cannot convert 'i' to object

On the cage match page, the issues seems to begin on jquery_cage_match.js:23

TweenLite.set(textDiv, {
    css: {
        perspective: 500,
        perspectiveOrigin: "50% 50%",
        transformStyle: "preserve-3d"
    }
});

On the CSS3 page, it seems to begin on cssplugin_css3_newAPI_full.js:27

TweenLite.set(trans3DBoxes, {
    perspective: 400,
    transformStyle: "preserve-3d"
});

I'm using the Bezier Plugin, but I'm finding that x and y coordinates aren't behaving like left and top. Is this a bug, or am I not understanding the intended behavior?

Here is an example with x and y not behaving as expected:
http://codepen.io/anon/pen/LjznG

and here is one with left and top behaving as expected:
http://codepen.io/anon/pen/pwotq

my chrome version is 31. some other versions also has the same issue.
If one element is absolute, and it's parent's style is not set height property, its top value will be not correct in chrome in computedstyle.
http://codepen.io/acroidea/pen/jLIdh
the button element's computedstyle is related to window height not its parent. tweenlite can not get the right initial absolute from computedstyle.

If an uppercase 'O' is used for opacity, the CSSPlugin will append a lowercase opacity and thus not work.

So this won't animate,
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

But this will,
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

IE8 doesn't seem to care what casing we use for opacity.

Hi,
I'm not sure if this is the right place to make note of this nor if anything can be done about it, but animations fail to play when VideoJS is also referenced within a document.

Both TweenLite and TweenMax fail to animate, doesn't matter if they are referenced before or after VideoJS.

Is there a solution?

Thanks,

I may have found a bug. I can't apply a transform string to an SVG element, but it normally works fine on HTML elements. I made a pen that shows how the only 2 out of 3 ways to do it work.

Red and Green work fine, but the blue one doesn't.

TweenLite.set('#blue', {
  transform:'scale(1.5)'
});
TweenLite.set('#red', {scale:1.5});
TweenLite.set('#green', {
  attr:{transform:'scale(1.5)'}
});

I was using a full transform string because I needed to apply a pre-composed matrix and there doesn't seem to be a matrix property in CSSPlugin.

It would be really awesome if you could specify what element will initiate the drag independently from the element that will be dragged (as long as the drag initiator is a child of the dragged element).

It's a pretty common use case; a window titlebar that drags the entire window, a drag icon that drags a row in a data grid, etc.

Not a big deal considering that it can be done with the attr plugin, but apparently tl.set("#svg1", {className:'works'}); causes an error. Pen

<html>
    <head>
        <title>Prototype</title>
        <style>
            #box{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: #f00;
            }
        </style>
        <script src="http://cdn.jsdelivr.net/gsap/12/TweenMax.min.js"></script>
    </head>
    <body>
        <div id="box"></div>
        <script>
            (function(){
                var box = document.getElementById('box');
                function init(){
                    box.style.display = 'none';
                    TweenMax.to(box, 1, {css: {left: 100}}); // works
                    //TweenMax.to(box, 1, {css: {x: 100}}); // works
                    //TweenMax.to(box, 1, {css: {transform: 'translate3d(100px,0,0)'}}); // doesnt work
                    setTimeout(function(){
                    box.style.display = 'block';
                    }, 100);
                }
                init();
            }())
        </script>
    </body>
</html>

It seems that for transform 3d, tweenMax will not parse the tween if the getComputedStyle() return a empty string rather than "none". It doesn't work with set() as well.

Hi,
over two different projects we noticed that some unexplicable errors (Cannot set property '_overwrite' of null) can happen from time to time on simple tweens with the minified version of tweenmax.js and that they don't happen anymore when we minify ourself tweenmax.js with uglifyjs.
Are you guys using google closure compiler for minification ?

Was checking a site I have been working on on BrowserStack and my animations aren't working in IE 8 or 9. Just doing some basic tweens like moving elements left, up, down, etc. Any hints? I followed the instructions on your getting started page: http://www.greensock.com/get-started-js/

This might not be really needed, after all the current documentation kinda works, but I found devdocs.io to be quite nice in that it offers instant search for any method across multiple libraries.

HI, I have updated my minified version of Greensock JS from 1.10.2 to 1.10.3 and I now receive syntax errors resulting in a TweenLite is not defined.

This is only in the minified version, the uncompressed version seems to be fine.

I am using TweenLite.min, TimelineLite.min and EasePack.min

Im sorry if this is abit vague.

Thanks

Suggestion: augment the steppedease object to take another easing function as a parameter so that options other than linear are available.

discussion:
http://forums.greensock.com/topic/7801-animating-steps/

Hey. KineticJS got some new things in: https://github.com/ericdrowell/KineticJS/wiki/Change-Log

I was having some problems earlier using KineticPlugin with the newest version. It seemed to me there was a problem between the plugin's calls and KineticJS. Correct me if I'm wrong. Just putting it out there. Would like to use some of those new things with GSAP. :)

[Draggable pugin] Is it possible to use one target to rotate the object and another one to move it around?

Hi awesome Greensock-Team,

we're using your Tools and we love 'em! Only some particular IE8-Configs don't like to play nice with it.

For a little project we need to optimize for IE8. Although Draggable works, IE still throws an Error in Line 1259:

if (self.isPressed || _getTime() - dragEndTime < 20) {
    e.preventDefault();
    if (e.preventManipulation) {
        e.preventManipulation();  //for some Microsoft browsers
    }
}

The e.preventDefault()-Method is not present there, so I suggest testing for it like with preventManipulation:

  if (e.preventDefault) {
    e.preventDefault();
  }

Greetings, Sebastian

Will v12 be available via Bower soon? I know I can download it straight from your website but we use Grunt and Bower and it would be great to have this be part of our package. Thanks.

I tried animating back and forth reusing the initial from and to values, but it didn't work.

Pen here

var tl = new TimelineLite()
var from = {x:0};
var to = {x:550};
tl.fromTo("#redBox", 1, from, to);
tl.fromTo("#redBox", 1, to, from);

I realized why it doesn't but TL starts using all the CPU and it never starts/ends, so I thought I'd let you know. Should this error be caught and handled?

When a TimelineMax or TimelineLite has a callback function inserted at position 0 (with .call, .add, or .addCallback) it doesn't fire on repeat or when the timeline has paused and play(0) is called. Callbacks at 0 fired in these situations as of 1.9.1 - but as of 1.9.5 no longer fire.