Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sadeghbarati007

How to Update Gsap props ?

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 post
Share on other sites

Hey sadeghbarati007. What's your actual end goal? To have a different duration and ease when reversing? 

 

What should happen when the animation direction (forwards or reverse) is switched mid animation?

Link to post
Share on other sites

My goal is clear dont attention to codepen example


can we update gsap props with condition ? if else statement ?

for example if want to have diff duration or ease or any gsap props or Reverse or any condition
what should I do ?

Link to post
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 post
Share on other sites

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

×