Jump to content
Search Community

How to Update Gsap props ?

sadeghbarati test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

this.menuTimeLine = gsap.timeline({
  paused: true,
});

this.menuTimeLine
.fromTo(this.ref.menu, {
  x: "-100%",
}, {
  x: "0%",
  duration: this.state.open ? 0.3 : 2,
  ease: this.state.open ? "linear" : "expo.out",
}, 0).reverse()



if (this.menuTimeLine.reversed()) {
  this.menuTimeLine.play()
} else {
  this.menuTimeLine.reverse()
}

Button.addEventListener('click', () => {

  if (this.menuTimeLine.reversed()) {
    this.menuTimeLine.play();
  } else {
    this.menuTimeLine.reverse()
  }

})

Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline 
In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x


or Gsap vars can help in this issue ?

in Codepen example dynamic ease or duration ?

besause timeline is outside of onClick ?

See the Pen YzWjjZq by riccardo051 (@riccardo051) on CodePen

Link to comment
Share on other sites

Sorry, but your end goal is not clear to me. 

 

Tweens and timelines are meant to be static for the most part. They're not intended to switch out their values at any given point because if they were built to do that the performance would be dreadfully bad. 

 

Again, if you describe what effect/end goal you want to achieve we can help you get there.

  • Like 1
Link to comment
Share on other sites

  • Solution

Many of those threads are asking about different things. But as stated in some of those threads and as I stated above, you can't just switch out properties when running an animation in reverse. You should instead setup two animations. Exactly how you should do so depends on your exact goals (which is why I keep asking for your goals). One way to set it up would be to do something like this:

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

 

If you want the duration to be more relative to the distance (like if someone toggles the direction mid animation) then you should calculate the distance remaining and adjust the duration to fit. Again, it depends on your end goal.

  • Like 3
Link to comment
Share on other sites

Yes, @ZachSaucier is correct - the old updateTo() method was removed in GSAP 3 for many reasons, performance being just one of them. And like he said, once we understand your end goal I bet we could provide a much cleaner way of doing things in GSAP 3. 

 

In your original post, you mentioned switching out the ease in reverse() but there are significant logic issues with that. For example, let's say you use a linear ease and the animation is 50% finished (midpoint), tweening x from 0 to 100 meaning it's 50 at this point and then you reverse() but switch to a "power3.out" ease. The x value would instantly JUMP because at a progress of 0.5, a power3.out ease would render it at a completely different place. That's why it's important for us to understand your goal - if you just want to animate back to the original starting point using a different ease, that's quite simple to do by creating a new tween at that point. Much, much cleaner and zero logic issues. 

 

Most of the time when I see someone asking about dynamically updating destination values or eases or whatever, they don't see the inherent logic issues and they're usually missing a much cleaner solution that doesn't involve editing the same animation instance. 

 

Of course for actual tweening values (not the duration or callbacks) you can update the tween's vars object directly and invalidate() the tween to force it to flush all the internally-recorded starting/ending values and re-record them on the next render. But again, that's often not the ideal solution. So once we hear from you about the "why" behind your request (your end goal), we can probably offer a solution that'd deliver what you're ultimately seeking. 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

I'm curious about this pen that @ZachSaucier created above. 

I'm trying to do something similar, but with timelines instead of tweens. My problem is, both 'back and forth' timelines play once, but when I try to play the 'forwards' timeline after having reversed it, its timeline progress is at 1 and it doesn't 'play again.' 

 

I'm trying to avoid simply 'reversing' the timeline animation. For things like dropdowns, it's nice to have the ease-out animation going both ways, as was echoed in the threads above.

Can you show an example of this 'toggling' behavior with two timelines (ideally with multiple steps) instead of two tweens? Or should I set up the pen :)

Thx!

DB

Link to comment
Share on other sites

Right after I posted this, I thought I should clarify something. 

It'd be great to see a few examples from the GSAP team (CodePen collection anyone?) that cover best practices around 'toggling' or 'two-part, back and forth' animations, whether that's a simple dropdown menu (that either reverses itself with a reverse() call or uses a completely different tween/timeline for the 'reversal'), or a modal/dialog that flies in with one timeline (say, flying in from the top of the viewport) and vanishes (say, by scaling to 0.8 and autoAlpha:0, poof!) with another timeline. Or a snazzy mouseover/mouseout hover timeline on a card. Two-parters. In, and out.

I see a lot of these scattered, 'how do I change props on reverse' threads, and I'll say this: I completely understand the logic of why you need to split that logic into two timelines. I've seen @GreenSock explain it a few times.

I think the main concern from these submitters is that a 'power4.out' curve looks awesome coming in, but 'takes a while' to leave when the exit animation is triggered with a reverse() call. A reverse timescale speed-up is kind of a band-aid in this situation - the animation just looks better if you can also 'power4.out' the exit animation too. 

So, some best practices around 'Timeline Toggles' would be awesome to see as a reference. 

DB

 

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