Jump to content

Inksplat Web Design

Difference Between Codepen and Browser

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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?



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

Link to comment
Share on other sites

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




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


Let us know.

Link to comment
Share on other sites

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.




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 ;)



  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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?

  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.