Jump to content
Search Community

Tween strangely changing his From value before going to his To value

Clemorphy test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi 

In my codepen example, when mouse enters the red area, I start 5 tweens, one on each grey bar in the green area. When mouse leaves the red area, I kill all the tweens.

Each bar is supposed to grow/shrink to a random value (height css prop), and then when it's finished, repeat this to another random value.

It is working almost correctly. The only thing that bothers me is, when you leave the mouse in for a few iterations, sometimes a tween will randomly change his From value before going to his To value. This is making some of the bars randomly "jumping".

I am using repeatRefresh: true, and from what I understand, it is supposed to force the next loop using current values as From values.

So why are some of these animations still "jumping"?

I also tried to use immediateRender: true and overwrite: true, but it changed nothing.

 

Any idea?

See the Pen GRBMaYE by clemorphy (@clemorphy) on CodePen

Link to comment
Share on other sites

@mvaneijgen by "jumping" I mean that, sometimes (not systematically), a bar is instantly set to a random height before starting his Tween to his To target value.

I just tried animating scaleY instead of height, but sadly the same issue occurs. Plus scaling the divs is stretching the border-radius I have on top of the "bars".

Here is the codepen using scaleY

See the Pen xxJPKRN by clemorphy (@clemorphy) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

I think you are overcomplicating this a bit IMHO.

 

Is far simpler to create a function that animates a single bar, loop through the bars and call that function. Here is a live example:

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

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

Thanx @Rodrigo

First, your codepen doesn't have the issue I was having. So it's a good thing 👍

Basically, you're replacing the repeat functionnality with calling the function again with onComplete

I tried earlier to create a function, not exactly like you did, but I was still using repeat : -1, and it didn't fix my problem.

So I'm gonna try to recreate the function the way I did, and not use repeat but use onComplete instead. That should work.

And if it doesn't, I'll just use your version as is 😁

Link to comment
Share on other sites

3 hours ago, Clemorphy said:

I still don't understand why I was having this little issue with repeat 🤷‍♂️

Yeah that's indeed odd. It seems that at some point, for one or more bars, the repeatRefresh parameter stops working.

 

I played a bit more with your example. Can you confirm that there are no jumps when using this code:
 

const bars = gsap.utils.toArray(".histo-animation div");

$(".barometre-card").hover(
  function () {
    gsap.to(bars, {
      scaleY: "random(0.1, 1)",
      duration: gsap.utils.random(1, 2),
      repeat: -1,
      repeatRefresh: true,
      repeatDelay: gsap.utils.random(0.5, 1),
      ease: "power3.out",
    });
  },
  function () {
    bars.forEach((bar) => gsap.killTweensOf(bar));
  }
);

I think there might be some issue with the jQuery selector or something like that, which is kind of odd IMO. I'll ping @GreenSock maybe He's seen something like this before and can tell us something that we're not aware of. As far as I can tell this should work exactly the same way.

 

Happy Tweening!

Link to comment
Share on other sites

12 hours ago, Rodrigo said:

Can you confirm that there are no jumps when using this code:

Still happening occasionally.

It's less noticeable with this code, because it's happening less often. This code starts only 1 Tween for all the bars, while previous code starts 1 Tween per bar. Less Tween = less probability to appear.

Link to comment
Share on other sites

Yep I noticed that. For now just stick to the previous solution with the callback and onComplete approach.

 

4 hours ago, Clemorphy said:

This code starts only 1 Tween for all the bars, while previous code starts 1 Tween per bar. Less Tween = less probability to appear.

It seems like that but GSAP is actually looping through the elements in the array. If you use a function based value you can actually log each iteration:

gsap.to(bars, {
  scaleY: (i) => {
    console.log("bar", i)// bar 0 - bar 1 - etc.
  },
});

https://greensock.com/docs/v3/GSAP/gsap.to()

Scroll down to the Function-based values section around the middle of the page.

 

Happy Tweening!

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