Just started, can't get it to work at all...

[GreenSock]

I would not recommend using an artificial emulator like that. Try using the real IE. I've seen a lot of problems with emulators where they really don't emulate correctly, especially around edge cases.

[failure13]

Ok, i'll try to use VM with IE collection then, thx for advice!

 

But, would you recommend something like portable browsers to test other browsers old and new versions, like Opera or Safari, Chrome?

 

Oh, and also i would like to know, is there any Cross-browser working color -matrix stuff with GSAP JS?

For example img desaturation like here: http://dev.artutkin.ru/desaturate/example.html

[Carl]

It looks like they are using a jQuery plugin to create a canvas element.

 

You can use our EaselPlugin with EaselJS to change brightness, color, saturation.

http://api.greensock.com/js/com/greensock/plugins/EaselPlugin.html

 

KineticJS is another canvas library that includes tweenable filters

http://www.html5canvastutorials.com/kineticjs/html5-canvas-tween-blur-filter-with-kineticjs/

That demo doesn't use GSAP, but you could easily tween the filterRadius of a Kinetic Object with a blur filter.They also have brightness and gray scale filters, check their docs and demos for more info.

 

We don't have any custom plugins that use canvas for advanced image effects, yet. 

[failure13]

If i understood you correctly:

1. I need to load EaselJS (yet another library...  : / )

<script src="js/libs/easeljs-0.6.1.min.js" type="text/javascript"></script>

2. And than this should work:

TweenLite.to(img, 0.6, {easel:{colorFilter:{saturation: 0}}});

 

But it don't...Where's my mistake?

 

We don't have any custom plugins that use canvas for advanced image effects, yet. 

God, i love to hear that 'yet'!

This would make our life much easier!

[GreenSock]

No no, EaselJS is a completely different library and in order to use it, you need to read up on its docs. It's a canvas-based library, so you need to create a stage, draw your image to it, and then use that EaselJS-specific object as the target of your tweens, not the img DOM element itself. That's why your code didn't work - you were just targeting the img DOM element rather than a native EaselJS object.

 

I know, it can be quite confusing coming from Flash and trying to do things that seemed relatively simple there and recreate them in JS. Browsers don't have filters yet that do saturation/grayscale stuff. That's why you need to use a framework like EaselJS or KineticJS to kinda "fake it" in a sense. Someday I'm sure browsers will natively support those kinds of filters, but it'll be several years at least before that's widespread. 

 

Again, please keep in mind that we cannot provide tech support for EaselJS or KineticJS - we've got very limited time and need to focus our energy on answering GreenSock-specific questions.

 

Good luck!

[failure13]

Yeah, i guess it is too complicated to use those frameworks for such a simple task.

 

Someday I'm sure browsers will natively support those kinds of filters, but it'll be several years at least before that's widespread.

Heh, that's the main trouble with it, even if they are for some moment - strong backwards compatibility will still be needed for 70% of all web-projects, and god damn them, IE 6-8 and Opera...What can i say.

 

I was trying to mimic this effect creating own .swg filter, and it work in lot of broswers, but i couldn't control ease or time of this effect, which i would like to control, implementation looks like this:

filter: url(js/filters.svg#desaturate);
filter: gray; 					    /* IE 6-9 */
-webkit-filter: grayscale(1);		/* Old WebKit */
-webkit-filter: grayscale(100%);	/* Google Chrome & Safari 6+ */
-moz-filter: grayscale(100%);		/* Firefox 3.5+ */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);			/* Opera */

And filter like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
	baseProfile="full"
	xmlns="http://www.w3.org/2000/svg">
	<filter id="desaturate">
	<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
	                                     0.3333 0.3333 0.3333 0 0
	                                     0.3333 0.3333 0.3333 0 0
	                                     0      0      0      1 0"/>
	</filter>
</svg>

[failure13]

Jack, i've just installed legit Windows XP SP2 with IE6 on Oracle VM Virtual Box, and i don't see rotation with this code, as in IEtester...

TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone});

Any thoughts why?

[Carl]

do you see the rotation here?

See the Pen f8cf6729f6097f3ebc1003e93c87b870 by GreenSock (@GreenSock) on CodePen

[failure13]

Yeah Carl, it's rotating in IE6!

What's the big secret?

[Carl]

Nothing really, the only finicky thing about ie<9 is that you must use position:absolute on the element or else clipping will occur when parts of the element rotate outside the initial bounds of the element. 

 

you can see all the source here:

See the Pen f8cf6729f6097f3ebc1003e93c87b870 by GreenSock (@GreenSock) on CodePen

 

The codepen editor will not work in IE6 so use Chrome.

[failure13]

Ah, i see the problem in my case, i've used CSS PIE 2.0 beta to draw circle with code and background texture, it sucsessfuly draws in IE6, but doesn't rotate

#circle {
    margin: auto;
    padding: 0px;
    width: 200px;
    height: 200px;
    position: relative;
    background: #353535 url(images/circle.jpg);
    border: 2px solid #FFFFFF;

    /* BORDER RADIUS */
    
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    behavior: url(js/libs/PIE-2.0b1/PIE.htc);
}

Any idea, if PIE and GSAP JS could work toogether?

 

Also, i've noticed that in Opera 9 and 10 nothing works, i mean all of this .js code doesn't animate, as if js wouldn't work at all...But in settings of Opera js active, anything specific i should add to my .js ?

// this will run after the page loaded
$(document).ready(function() {

	// textareas behavior
 	$('textarea, .inputSingle').focus(function() {
 		if (this.value == this.defaultValue) {
 			this.value = '';
 		}
 	});
 	$('textarea, .inputSingle').blur(function() {
 		if (this.value == '') {
 			this.value = this.defaultValue;
 		}
 	});

	// menu buttons animation
	$('ul#menu li a').hover(function() {
		TweenLite.to(this, 0.35, {css:{backgroundColor: '#333333', color: '#FFFFFF'}});
	}, function() {
		TweenLite.to(this, 0.35, {css:{backgroundColor: '#38ba9d', color: '#000000'}});
	});

	// content hover
	$('.content').hover(function() {
		TweenLite.to($(this).find('h3'), 0.5, {color: '#21a7bf'});
		TweenLite.to($(this).find('h3'), 2, {width: '60%', ease: Cubic.easeOut});
	}, function() {
		TweenLite.to($(this).find('h3'), 0.5, {color: '#353535'});
		TweenLite.to($(this).find('h3'), 2, {width: '99%', ease: Cubic.easeOut});
	});

	TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone});
});

[Carl]

As for pie, try doing some jQuery modfications on your pie-styled elements.

Can you change the css of a pie-styled element with jQuery?

try somethinhg like:

#("yourselector").css("left", "200px");

 

Not really sure what a 3rd party plugin is doing to elements a 12 year old browser to make it conflict with GSAP. I noticed pie has 100 open issues on Github but perhaps you can ask there as well. Sorry, but rIght now we don't have the resources or need to investigate it further. 

 

Its impossible to guess why your tweens aren't running without having testable css and html as well. For instance you are trying to tween "circle" but I don't know what that is.

Also, maybe your hovers are failing. I'd suggest testing the tweens without any interaction first.

 

Please use codepen or jsfiddle and start with very small examples, if you need our input.

I would also suggest you start using alert() or console.log() to try to test which sections of your code are failing, just like you would use trace() in actionscript. 

 

Most modern browsers have debugging tools built in. Check to see if you are getting any errors.

In IE10 use f12-developer tools. 

[failure13]

You mean like this?

$("#circle").css("left", "200px");

That works, yes!

 

No probs about PIE, but i strongly suggest you to check it out, since it's the only working solution for modern CSS3 features, crossbrowser .png with alpha  (working even on oldest crap like IE 5.5) and lots more, and it really works (at least stand alone).

They've started not too long ago, so i think it's ok to have 100 open issues

 

For those who need all modern stuff to work on IE CSS PIE is essential, since they have it all at once, and it works, unlike most of other solutions for old IEs..

 

What about Opera 9 & 10 - i don't know...It just doesn't work at all, i mean, nothing that i wrote in .js looks like .js ain't working at all. Opera 11 and 12 is working just fine.

 

I've checked .js in latest firefox, it says:

[23:40:05.274] Error: Permission denied to access property 'toString'
[23:40:05.716] Error: Permission denied to access property 'toString'
[23:40:48.896] Error: Permission denied to access property 'toString'
[23:40:49.466] Error: Permission denied to access property 'toString'

 

Will create codepen a bit later, i've sent you in pm my files, so you can take a look if you have time.

[Carl]

Opera 9 and 10 don't support css transforms ie:rotation, scale, skew

http://caniuse.com/#feat=transforms2d

 

 

 

with jQuery you are using a valid selector 

$("#circle").css("left", "200px");

but with TweenMax you aren't

TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone});

it should be

TweenMax.to($("#circle"), 8, {rotation: 360, repeat: -1, ease: Linear.easeNone});

[jamiejefferson]

And just so you know why circle worked in some browsers: it's become part of the HTML5 spec and provides a global variable based on the element id (although it seems like a silly addition since document.getElementById already works...). Implementations of this are not consistent among older browsers though. I would suggest sticking to the jQuery selectors since browser compatibility seems to be important for you.

 

http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/

 

http://www.2ality.com/2012/08/ids-are-global.html

[failure13]

That's just what i thought, html5, but take a look, if i've correncted those errors with selectors, such code still doesn't work in IE6:

 

See the Pen LwCgt by failure13 (@failure13) on CodePen

 

I mean rotation

[jamiejefferson]

Seems like pie is interfering then. I just opened it up in IETester and got a few errors that denied access to pie, and then the page loaded fine with rotation working as expected (no pie = no border-radius though).

 

My guess is that the pie rendered object (VML??) isn't compatible with the filters used by GSAP to support rotation and other transforms on old IE. And their website doesn't indicate that pie supports CSS3 transforms, sooo...

 

You could try lodging an issue on their github but the project is pretty old now and doesn't seem very active.

[failure13]

I don't know, it seems that pie doesn't work at all in codepen for some reason (url is valid...hmm)

Locally or on host it work.

 

Codepen ain't ideal either, i mean, it doesn't render @font-face for example, so...

 

I'll try their .js version wait a minute...

 

No, .js don't work through codepen also, but in all real IE browsers it works

It's hard to debug, dammit :\

[Carl]

here is a tip for using codepen.

The code editor only works in IE9+ but they offer a "full" view of the result that you can test in any browser.

 

for example this link will be horrible in IE6

 

See the Pen f8cf6729f6097f3ebc1003e93c87b870 by GreenSock (@GreenSock) on CodePen

 

but this full view should work fine

 

See the Pen f8cf6729f6097f3ebc1003e93c87b870 by GreenSock (@GreenSock) on CodePen

 

*notice in the 2nd url the word pen has been replaced by full.

 

Jamie, you might find this useful (if you didn't know before), if you use the word "live" like

 

http://codepen.io/GreenSock/live/f8cf6729f6097f3ebc1003e93c87b870 you can have a full window that automatically updates everytime you make changes in the editor (PRO members only).

[jamiejefferson]

Good tips Carl; I actually only realised /full and /live existed today trying to test this one out.

[failure13]

Yep, i already know Carl, but this doesn't make it work any better in terms of .pie or web-fonts, so i don't coimpletely belive to what i see in codepen, even though it's handy to show some simple stuff...

 

Opera 9 and 10 don't support css transforms ie:rotation, scale, skew

http://caniuse.com/#feat=transforms2d

 

But do it unsupport even THIS?

TweenLite.to($(this).find('h3'), 2, {width: '60%', ease: Cubic.easeOut});

 

Just dinamically changing width...? cmon, i think there's somehow javascript ain't working, it should work at least somehow, but even simple color changes doesn't work there, and it's the only relatively old browser that have this effect, there should be something more about it...

[GreenSock]

codepen is the top choice of almost every well-known professional in the industry that I'm aware of. I'm at the Fluent conference right now in San Francisco and just saw one of the presenters using codepen live as a part of their presentation. Chris Coyier of CSS-Tricks (one of the most popular, authoritative sites on the web about development) not only uses it but he's one of the founders/creators. It's not just "handy to show some simple stuff". If you can't get JS to work in it, I'm really confused. That's exactly what it's for. 

 

I'm not sure there's much more we can do to help you here, failure13. We'd certainly like to, but we can't get pulled into tech support for codepen or CSS Pie, etc. (not that you were intending that at all). 

 

To answer your question, yes, GSAP can tween the width of an element to "60%".

 

If you still need help with a GSAP-specific issue, please create a very basic HTML file that illustrates the issue, zip it, and post it here.

[failure13]

http://cdpn.io/ijEIh

See the Pen ijEIh by failure13 (@failure13) on CodePen

 

All right, now i have menu, stylized in CSS default and hoover states, and i want to keep it that way even with js, to ensure that user will not see some non-sense if js disabled, so now i want to animate my buttons, make duration slower and sexier etc.

 

Questions are:

1. Is there any easy way with GSAP JS, to just specify duration and ease of what should be done between default and hoover buttons states, and rest data will be taken directly from CSS?

note: if this question could be solved, then rest of questions should fall off.

 

2. How to get rid of this effect from my example, which cause after page loading, at first time you hover - fires usual CSS without transitions and ease, and only then start to look as i wrote it in .js file?

3. For example i want to change gradient, border radius or box shadow with GSAP JS, on hoover state, which has all of those broswer specific prefixes (and must have them, if i want my project to work everywhere), how should i talk GSAP JS with such parameters, in which sintax form?

[Carl]

Thanks for creating the codepen examples.

 

The reason you don't get the animation on the first hover is because you are defining a hover style in your css that is conflicting with the TweenLite animation.

 

CSSPlugin allows you to tween the className of an element which allows you to apply and remove a css rule from your css. Please read the CSSPlugin docs for more.

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

It can be implemented very easily like so:

$("#box1").hover(
  function(){
    TweenLite.to("#box1", 0.5, {className:"+=redRounded"});
  }, function() {
    TweenLite.to("#box1", 0.5, {className:"-=redRounded"});
  }
);

Demo: http://codepen.io/GreenSock/pen/518956e6f517bd7dbd6b8d4ea8e556c8

 

To learn more about the CSS3 properties that CSSPlugin supports please read

http://www.greensock.com/css3/

 

For the properties CSSPlugin supports, you don't have to worry about vendor prefixes, they are handled behing the scenes.

 

Also, we don't currently support tweening gradients directly.

 

If you have more issues, please start another thread. It isn't ideal to keep this one going and having everyone notified each time there is something new.

 

Thanks

[failure13]

That's awesome to have such ability, thank you!

Too bad there's note about little speed downgrade, wonder how much it is, coz using this classsName property is waay too handy!

 

But i can't understand how can i target in my case active or hover class (pseudo-class), by logic this should work, but it's not:

 

See the Pen ijEIh by failure13 (@failure13) on CodePen