greensock / gsap Goto Github PK
View Code? Open in Web Editor NEWGSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
Home Page: https://gsap.com
GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
Home Page: https://gsap.com
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.
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
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.
[Draggable pugin] Is it possible to use one target to rotate the object and another one to move it around?
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.
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();
});
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.
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
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.
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.
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. :)
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/
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
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)'})
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,
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>
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.
Hi,
is there any ruble for an autocomplete in Aptana Studio 3?
Best, Boris
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.
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.
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.
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
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.
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!
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.
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 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?
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 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?
onStart and onComplete handlers are not called if using TimelineLite solely to call functions
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.
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/
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.
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
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?
Shouldn't the following work? I have to use a placeholder object + onUpdate
var
$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
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
I tried animating back and forth reusing the initial from and to values, but it didn't work.
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?
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();
});
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 ?
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
<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.
Would be great if this could be downloaded via bower!
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.
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.
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.
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
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
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
$ bower install tweenMax --save
[...]
mismatch The version specified in the bower.json of package tweenMax mismatches the tag (1.10.0 vs 1.9.8)
mismatch You should report this problem to the package author
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"
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.