Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Inksplat Web Design

Difference Between Codepen and Browser

Recommended Posts

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

boombox.png

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

 

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.

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.

 

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

 

 

  • 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.
×