Bug with commas being inserted?

cmuadamson · August 25, 2016

Hello,

I'm working with TweenLite to change an image's attributes. I've found that if I use a .to() to change the "src" attribute of an image, and the filename is something like "a1-1.png", then the .to() operation inserts a comma into the filename!? It comes out "a1,-1.png". This may happen with other attributes for other tags, but I ran into it with img-src. Here is a short example that uses jquery v2.2.2 and TweenMax to move values around:

<body>
<p>The src of the image is to be changed to "<span id="imagesrc1"></span>".</p>
<p>When that is copied in with TweenLite.to(), it becomes "<span id="imagesrc2"></span>" with a comma in it.</p>

<img src="a1-1.png" id="image1" />

<script>
// Get the src of image1
var src1="a1-2.png";
$('#imagesrc1').html(src1);

// Use TweenLite to change the src of the image to that value
TweenLite.to($("#image1"), 0, {src: src1});

// Now get the image's src value
var src2=$('#image1').attr('src');

// Display the two values. src2 got a comma from TweenLite
$('#imagesrc2').html(src2);
</script>

</body>

I am working with TweenMax.min_1.18.2.js on a Firefox browser. Using the DOM inspector of the browser, the image src is seen to be the value with a comma in it -- this isn't jquery misreading it. Anyone else able to reproduce this? Debug it?

Thanks,

-Mark

Dipscom · August 25, 2016

Hi cmuadamson,

Welcome to the forums!

Do you think you could put together a little CodePen with a reduced case example? It will help to encourage more people to test it and report if they experience the same issue as yourself. I'm sure you will appreciate that it is more likely that someone will click a link rather than put together a demo with the same conditions as yourself to test this.

Cheers!

Here's a guide video just in case:

joe_midi · August 25, 2016

Thats probably by design, I imagine Carl and Jack would give a better answer here, but I don't think GSAP was intended to be using to set properties as strings.

Rather than numeric values likes 1 - 100.

But you don't actually need to use GSAP to set the src of an image tag, you could just use vanilla Javascript.

See the Pen oLAyEy by joemidi (@joemidi) on CodePen

Jonathan · August 25, 2016

Yes i would echo Dipscom advise to provide a codepen demo example so we can recreate this issue you are seeing. Since it will be difficult to do so without a codepen demo!

And i would agree with joe_midi that you can just use vanilla javascript to set the img src url or just use jQuery attr() to set it since your using jQuery.

Thanks!

Carl · August 25, 2016

keep in mind the src is not a css property it is an attribute of the image tag.

I agree with the others that vanilla js would be fine for this but if you want to change the image and have it sequenced with other animations you can use a set() with the AttrPlugin like:

TweenMax.set("img", {attr:{src:"http://loremflickr.com/640/480"}, delay:2})

http://codepen.io/GreenSock/pen/wWLEBp?editors=0010

joe_midi · August 26, 2016

@Carl, I believe the issue is actually the naming convention of his images 'a1-1' and 'a1-2', where I guess there is a RegEx being performed and 'a1-1' is being turned into 'a1,-1' ?

Notifications

Messages

Bug with commas being inserted?

Warning: Please note

Recommended Posts

cmuadamson

Link to comment

Share on other sites

Dipscom

Link to comment

Share on other sites

joe_midi

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

joe_midi

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members