First animation doesn't ease

[notalkingplz]

For some reason the first animation doesn't ease, but the second one does. Is there something I'm missing? 

See the Pen xwKVyo by anon (@anon) on CodePen

[Rodrigo]

Hi,

 

Although I'm not completely sure of what you're after, my guess is that there's an issue with the units you're passing to the CSS Plugin, viewport units. When I changed your code to px, it worked as expected. Also I simplified a bit your code to this:

var button = document.getElementById("button"),
    tl = new TimelineLite({paused: "true", reversed: "true"});

tl.to(button, 0.5, {borderRadius: "25px"}).reverse();

function buttonInput() {
  if(!tl.isActive()) {
    tl.reversed() ? tl.play() : tl.reverse();
  }
}

Another toggle option is this:

function buttonInput() {
  if(!tl.isActive()) {
    tl.reversed(!tl.reversed())
  }
}

I'll summon our animation witch doctors regarding the viewport units, please stand by for an official word on that. In the mean time hopefully that solution helps.

[GreenSock]

I noticed a few issues:

1. Some browsers have glitchy support for vw/vh units. Use with caution.
2. Your original pen used a super high vw value, so it LOOKED like there was no easing just because your tween was 0.5 seconds and was shooting way past what was visible. If you inspected the values, you'd probably see that they were actually easing as expected but visually it looked jarring. 
3. I'm not sure what you're trying to do with having things paused and reversed initially, plus using multiple timelines adding onCompletes via the eventCallback() method rather than directly in the vars object (it's fine...just unconventional), but the way you were implementing things would cause the user's repeated clicks to get ignored. Perhaps that was by design and that's okay. But I think most people would get pretty annoyed and they'd want to be able to click again mid-tween and have it reverse smoothly. 

In the upcoming release of GSAP, I tweaked the behavior to better handle vw/vh units too. Here's an updated fork of your pen that has the behavior I suspect you wanted but with a lot less code:

http://codepen.io/GreenSock/pen/a6aa506f09a31838ed7a4e58e38588d3/

var toggle = TweenLite.fromTo("#button", 0.5, {borderRadius:"0.546875vw"}, {borderRadius:"1.953125vw", paused:true, ease:Power1.easeInOut, reversed:true});

function isLatched() {
    return (toggle.progress() === 1);
}

function buttonInput() {
    toggle.reversed( !toggle.reversed() ).resume();
}

Notice that pen is linking to the beta version of the upcoming release of TweenMax: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Does that help?

[notalkingplz]

Hi,

 

Although I'm not completely sure of what you're after, my guess is that there's an issue with the units you're passing to the CSS Plugin, viewport units. When I changed your code to px, it worked as expected. Also I simplified a bit your code to this:

var button = document.getElementById("button"),
    tl = new TimelineLite({paused: "true", reversed: "true"});

tl.to(button, 0.5, {borderRadius: "25px"}).reverse();

function buttonInput() {
  if(!tl.isActive()) {
    tl.reversed() ? tl.play() : tl.reverse();
  }
}

Another toggle option is this:

function buttonInput() {
  if(!tl.isActive()) {
    tl.reversed(!tl.reversed())
  }
}

I'll summon our animation witch doctors regarding the viewport units, please stand by for an official word on that. In the mean time hopefully that solution helps.

 

Hey, thanks for the reply. I changed it to percentages and it works great.

 

 

I noticed a few issues:

1. Some browsers have glitchy support for vw/vh units. Use with caution.
2. Your original pen used a super high vw value, so it LOOKED like there was no easing just because your tween was 0.5 seconds and was shooting way past what was visible. If you inspected the values, you'd probably see that they were actually easing as expected but visually it looked jarring. 
3. I'm not sure what you're trying to do with having things paused and reversed initially, plus using multiple timelines adding onCompletes via the eventCallback() method rather than directly in the vars object (it's fine...just unconventional), but the way you were implementing things would cause the user's repeated clicks to get ignored. Perhaps that was by design and that's okay. But I think most people would get pretty annoyed and they'd want to be able to click again mid-tween and have it reverse smoothly. 

In the upcoming release of GSAP, I tweaked the behavior to better handle vw/vh units too. Here's an updated fork of your pen that has the behavior I suspect you wanted but with a lot less code:

See the Pen a6aa506f09a31838ed7a4e58e38588d3 by GreenSock (@GreenSock) on CodePen

var toggle = TweenLite.fromTo("#button", 0.5, {borderRadius:"0.546875vw"}, {borderRadius:"1.953125vw", paused:true, ease:Power1.easeInOut, reversed:true});

function isLatched() {
    return (toggle.progress() === 1);
}

function buttonInput() {
    toggle.reversed( !toggle.reversed() ).resume();
}

Notice that pen is linking to the beta version of the upcoming release of TweenMax: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Does that help?

 

Thanks for the reply. I didn't realise that the value would affect the ease time :S.

 

The example I showed looks really weird and unconventional because it's only a snippet of the code I'm using; just to keep things simple to fix the initial problem.