Difference Between Codepen and Browser

[Inksplat Web Design]

Hi

I coded this animated boombox in notepad++ and when the dragger at the bottom is dragged the width of the slider should increase, like in the image below. It works perfectly in my browser but when I put the same code in codepen the width updates as its supposed to but the slider never animates.

 

Is this a codepen issue?

or is there something I've left out that is causing this?

Thanks

See the Pen jdYBJo by inksplatwebdesign (@inksplatwebdesign) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Very cool.

The slider appears to work fine for me.

The green bar grows and the dragger thing moves with my mouse. Notes get bigger with increase in value.

 

Here's a video from Mac Chrome

 

https://greensock.d.pr/leyH4s

 

Is there a particular browser you are seeing the error in? Or am I not understanding the problem properly?

 

Let us know.

[Inksplat Web Design]

Thanks for your help

I only tested it in firefox, turns out that's the problem

[Carl]

ok, I think i found it.

 

First, your fromTo() wasn't really necessary here as your from and to values are identical.

 

 TweenMax.fromTo("#slider", 2.2, {width:this.target._gsTransform.x}, {width: this.target._gsTransform.x,  ease:Power0.easeNone})

 

However,  it's really not the cause of the problem and it was technically working.

If you look in dev tools you will see that the #slider element has inline style for width being updated appropriately. 

But the visual changes were not being rendered.

 

Why?

 

Because while GSAP was tweening the width inline style, the #slider also had a width attribute set to 0 which was overriding the style. 

Notice there are 2 widths used below:

 

<rect id="slider" style="color: rgb(0, 0, 0); isolation: auto; mix-blend-mode: normal; shape-rendering: auto; image-rendering: auto; width: 548px;" fill-opacity=".99216" ry="13.254" height="26.509" width="0" y="2543.3" x="-1127.3" fill="#b2ec5d"></rect>

 

So the trick is you need to tell GSAP to change the width attribute using the AttrPlugin (included in TweenMax) like so:

 

 

 

TweenMax.set("#slider", {attr:{width:this.target._gsTransform.x}})

 

The demo below should work in FireFox

 

 

See the Pen omOood?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In the future please don't include audio unless its necessary

 

 

[GreenSock]

I believe the problem is that you're mixing attributes and CSS properties to control the exact same thing, and some browsers prioritize one over the other differently. So, for example:

 

<rect style="width:100px" width="0" />

 

width is defined as both 100px and 0...which should the browser render? Chrome says 100px, Firefox says 0. Both are right...and wrong. 

 

I'd strongly recommend using CSS consistently (except for transforms). 

 

Does that help?

[GreenSock]

Ha, Carl posted while I was working on my answer. Looks like we came to the same conclusion [high-five, Carl].