jquery selector not working as expected

[pbohny]

If I have somthing like

<defs>
	<clipPath id="mask-1">
		<rect fill="none" x="0" y="0" width="500" height="400"></rect>
	</clipPath>
</defs>

 

I can change the width with jquery like so:

 

$('#mask-1').children().first().attr("width",300)

 

Now I am trying this:

TweenMax.to($('#mask-1').children().first(), 2, {width:300});

and

var mc = $('#mask-1').children().first();
TweenMax.to(mc, 2, {width:300});

 

What am I missing?

[Rodrigo]

Hi,

 

I believe that is a Raphael element that you're trying to tween right?, if that's so you should use the raphael{} wrapper, something like this:

TweenMax.to($('#mask-1').children().first(), 2, {raphael:{width:300}});

//or if you store the element in a var

TweenMax.to(mc, 2, {raphael:{width:300}});

I'm not a raphael expert but at least that's what i recall from the api reference.

 

Hope this helps.

 

Cheers,

Rodrigo.

[pbohny]

I had tried that as well, no success.  Setting the width with the selector in the console results in this:

input:    $('#mask-1 rect:first').attr('width','400')
output:   [<rect fill=​"none" x=​"0" y=​"0" width=​"400" height=​"427">​</rect>​]

 

Somehow I should be able to tween these values?

[Rodrigo]

Hi,

 

Does raphael allows the use of clipPath and defs?, sorry I'm ignorant about it and will like to know.

 

What I've done is to create a common svg element:

<?xml version="1.0"?>
<svg style="position:relative;" id="paper1" width="300" height="50" 
     viewPort="0 0 300 50" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
	
	<rect style="position:relative;" id="rect1" x="0" y="0" width="100" height="50"/>
	
</svg>

And then tween an object value and pass that through an onUpdate callback with JQuery:

$(document).ready(function(){

var paper1 = $("#paper1").children().first(),
    elemWidth = {a:100};

TweenMax.to(elemWidth, 1, {a:300, onUpdate:updateFn});

function updateFn()
{
	paper1.attr('width', elemWidth.a);
}

});

This works but is a little more code than an ideal situation and if you get more elements that would mean more coding and more callbacks. I hope someone with more SVG knowledge can take a hit to this. Also a live example (fiddle or codepen) would be very helpful.

 

As you can see I'm not an SVG expert because is not my focus right now, but learning svg and canvas are on my to do list.

 

Hope this helps,

Cheers

Rodrigo.

[GreenSock]

I created an AttrPlugin that should allow you to tween numeric attributes like:

 

TweenLite.to(element, 1, {attr:{width:100, x:200}, ease:Linear.easeNone});

It's in the upcoming 1.9.0 release - you can download a preview zip from this other post: http://forums.greensock.com/topic/7326-tweening-easeljs/#entry27506

 

It's included inside TweenMax too, so you don't have to load any extra files if you're using TweenMax (version 1.9.0 or later of course). 

 

I'd love to hear what you think of it. I hope it helps.