We Keep Coding

Scale animations also translating gsap

I have an svg, and I want four of the elements to pop up in place. I am trying this with gsap but they look like they are flying into place. Here's the code I am using for this
gsap.fromTo(
'#ide, #html, #handlebar, #search',
1.5,
{
scale: 0,
},
{
scale: 1,
yoyo: true,
ease: 'none',
repeat: -1,
}
);
Please also check the codepen for current working version: https://codepen.io/prateekkarki/pen/oNxEZxo
I don't want them flying from right, I just want them to scale up from their original position. How can I achieve this in GSAP, please help.

Just remove your CSS that's affecting the transforms:
#ide, #html, #handlebar, #search {
transform-origin: top center;
transform-box: fill-box;
}
Demo.
FYI you're more likely to get a faster response on the GSAP forums.

Animation style ease, ease-out etc. is not working in my javascript code

I have a function that animates the addition of margin to a div-box, but for some reason easeOut animation style is not working for me. Linear animation style works fine tho.
Here is the function:
$("#bokse1").click(function() {
$("#nav").animate({
marginLeft: ["+=100px", "linear"],
}, 400, function() {});
});
Here is a fiddle: http://jsfiddle.net/hto5qLmb/1/
I wanted to make it like this:
marginLeft: ["+=100px", "easeOut"],
but it is not working.

It seems like jQuery really does not want to play nice with easing out with that type of animation selector, if you still want to have the ease out effect, use:
$("#bokse1").click(function() {
$("#nav").animate({ "margin-left": "+=50px" }, "easeOut" );
});
Additionally, have a look at your developer tools, and you can see the myriad of erros that fire when you attempt to use the easing in the way you did initially. Strange indeed

Greensock (GSAP) is much less smooth/more jerky compared to css animations in this simple example. Is there a way to improve it?

I'm new to gsap so if I'm doing something horribly wrong then please correct me, but this is a pretty simple example. I'm just trying to compare performance of css animations to gsap animations in Firefox and Chrome, to decide which to use for an animation I may be working on in the future.
Based on examples that I've seen on various sites it looked like gsap was supposed to perform better in general and be less wonky with more options, but for this simple example that's not what I'm seeing at all, and I would think something like this would be something quite common to both use cases of css and gsap animations.
I know about the Firefox issue referenced here, where you need to apply a rotation to animations or sub pixel rendering is not used, so I've applied the rotation in both the css animations as well as the gsap animations to try and fix the jerkiness in Firefox. That did help, but still when you compare the two animations in either Firefox or Chrome, the gsap example visibly lags. The two animations are not exactly moving at the same easing, but I think it's close enough that they can be compared properly.
Firefox gsap performance is still much worse than in Chrome, but Chrome gsap does still lag every few repeats or so, while in Chrome the css animations do not. It looks to me like Firefox css animation is about as good as Chrome gsap performance.
Here is the codepen so you can see for yourself, note that to see it properly you should open the link and expand your window, and it'll work best on a resolution of at least 1920x1080:
http://codepen.io/apodworny/pen/dpkEQg
So am I doing something wrong? Are there more tricks to increase performance such as the Firefox rotation trick? Is this just something specific that greensock has problems doing? Any help or insight would be appreciated.
Thanks!
Relevant HTML, CSS, and JS:
HTML:
<div id="site-wrapper">
<div class="css-animations">
<div class="square">css</div>
<div class="circle">css</div>
</div>
<div class="gsap-animations">
<div class="gsap-square">gsap</div>
<div class="gsap-circle">gsap</div>
</div>
</div>
CSS:
#keyframes pulse {
0%, 100% {
transform: translate(100px, 0) rotate(0.01deg);
}
50% {
transform: translate(1500px) rotate(0.01deg);
}
}
#keyframes circle-pulse {
0%, 100% {
transform: translate(100px, 0) rotate(0.01deg);
}
50% {
transform: translate(1500px) rotate(0.01deg);
}
}
JS:
$( document ).ready(function() {
var tl = new TimelineMax({
repeat: -1
});
var tl2 = new TimelineMax({
repeat: -1
});
var $square = $('.gsap-square');
var $circle = $('.gsap-circle');
tl.to($square, 1.5, {
x: 1400,
ease: Power1.easeOut,
rotation:0.01
})
.to($square, 1.5, {
x: 0,
ease: Power1.easeOut,
rotation:0.01
});
tl2.to($circle, 1.5, {
x: 1400,
ease: Power1.easeOut,
rotation:0.01
})
.to($circle, 1.5, {
x: 0,
ease: Power1.easeOut,
rotation:0.01
});
});

This is a more of an apples-to-apples comparison (kinda): http://codepen.io/anon/pen/BLJGwK?editors=0110
On my system, I couldn't notice any difference in terms of smoothness, but I realize results may vary by system, graphics card, etc.
And your GSAP code could be quite a bit more concise (here's the meat:)
var tl = new TimelineMax({repeat: -1});
tl.to('.gsap-square, .gsap-circle', 1.5, {
x: 1500,
ease: "quad"
}).to('.gsap-square, .gsap-circle', 1.5, {
x:100,
ease:"quad"
});
Please keep in mind:
You're comparing the best possible scenario for CSS, and worst possible scenario for JS because if you only animate transforms (or opacity), most modern browsers delegate that to a different thread. There are other consequences to that, however. See http://greensock.com/css-performance for a video explanation. In many other cases, GSAP was actually faster than CSS.
If you add even one other property to your animation (doesn't matter what, just something besides transforms or opacity), you lose that separate thread boost in Firefox (the entire thing, including transforms, goes back to the main thread...at least that's my understanding and it has to do with the synchronization issue mentioned in the article above).
GSAP does automatically GPU-accelerate things for you via JS.
You might want to try adding will-change:transform to the elements you're animating.
The real benefit of GSAP over CSS (and other libraries), according to most people I talk to, has to do with:
Workflow. Changes and experimentation are much easier for even moderately complex animations. Total control of every aspect. Way more easing options. Hook up scrubbers, seek(), reverse(), timeScale(), etc.
Compatibility. GSAP works around a ton of browser bugs and inconsistencies that'll bite you if you try animating with CSS.
Capabilities. GSAP can do far, far more than CSS. Won't bore you with a list here, but it's extensive. Partial list is at http://greensock.com/why-gsap/
And yeah, GSAP is hyper optimized for performance. It's pretty widely seen as the gold standard in that regard. I'm not aware of anything faster, though CSS animations of transforms do have an advantage in this one scenario. But frankly I doubt it'd even be noticeable in most real-world scenarios. I always encourage folks to do their own tests.
Sorry if that sounded like a sales pitch. Didn't mean it that way - I just wanted to set the context properly. Sometimes I see people get hyper-focused on one particular scenario or use case and they miss some very important factors that might be worth considering.

WinJS enterPage animation not working as expected

I wanted to add animations to my app on page enter, and hooked with the default WinJS.UI.Animation.enterPage(element), and that worked fine sliding in the element from right to left.
I need to slide it from bottom (100px) to top. Once I overrode the default values with WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" }) I saw no animation at all on my screen which is weird.
However when coupled with WinJS.UI.Animation.exitPage(oldElement), the animation seemed to work but I wanted to further tweak the timing.
following as per https://msdn.microsoft.com/en-us/library/windows/apps/Dn127042(v=win.10).aspx#creating_custom_animations, didn't help. After using the example from "Combining custom animations and transitions" in the link, I could see only the opacity changing and the element fading in, however no translation at all. I tried the same pairing with WinJS.UI.Animation.exitPage(), and adding my own customExitPage - basically using from WinJS, and with just opacity... and nothing just works.
I was referring to some of the animation implementations from here as well -
https://github.com/winjs/winjs/blob/ad8691b3d5227ff1576a5d2a90a42f022498d2a9/src/js/WinJS/Animations.js, to get control over the timing.
Anyone else having this issue? or am I doing something wrong... or is it WinJS behaving bad?
EDIT:
weirdly enough the "to top" animation with enterPage(element, {top: "100px", left: "0px"}) started working. However the custom animation still remains elusive.

well, I was able to finally figure out the "weird behavior". The #keyframes should have been set in CSS, and I was trying a few other things and apparently that's the reason that it didn't work.
However, I would probably say the explanation could have been a little more clearer in the site as well.
when we are already providing the from - to values in the javascript, I would otherwise about providing the same again as part of CSS too which is still weird.
Like mentioned in the site,
add this to css: #keyframes custom-translate-in { from { transform: translateY(50px); } to { transform: none; } }
and have this in js:
function runCustomShowStoryboard() {
return WinJS.UI.executeAnimation(
target,
{
keyframe: "custom-translate-in",
property: "transform",
delay: 0,
duration: 367,
timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
from: "translate(50px)",
to: "none"
});
}
Never was able to figure out why and how the "bottom to top" animation started working (probably restarting visual studio helped)

Image jQuery Sliding not working

I'm trying to make an image slidein on page load but it doesn't seem to work at all. The delay has no problem but the sliding effect doesn't do anything. Any help would be greatly appreciated.
$(function() {
$(".bgslide").one('load', function () {
$(this).delay(1000).show("slide", { direction: "left" }, 'linear', 2000);
}).each(function() {
if(this.complete) jQuery(this).load();
});
});
Here is a link to a jsfiddle as well: http://jsfiddle.net/cDYvh/

The slide effect comes with jQuery UI which you didn't include: http://jsfiddle.net/cDYvh/1/

You could also use $.animate() to avoid including jQuery UI. For example, you could accomplish your example with something like this:
$(this).animate({ left: 2000px });
Note: You'll probably need to apply position:absolute to the elements. Other items can be animated as well, including color, opacity, etc.
Animate Example