Jump to content
Search Community

steppedEase helper

eden test
Moderator Tag

Recommended Posts

Hi

 

Is there a way to create stepping ease helper to update the positions of object to the corresponding array values, a defined number of times ?

 

what i tried so far:

    TweenMax.staggerFrom(textArray, .5, {y:"+=10", alpha:0, ease:SteppedEase.config(16),
        onUpdate:function(){ 
            //console.log("updated"); // updates many time, not good. I would like to triger some code, only when letter apreas. So this needs to fire only 16 times total
        }
    },.5) 

 

i also tried stepping ease with a variable version

var ticker = {value:0}

    TweenMax.to(ticker, 1, {value:16, ease:SteppedEase.config(16), 
      onUpdate:function() {
        console.log("updated"); // unfortunatly this update trigers more times than 16
      }
    });

Best regards.

Link to comment
Share on other sites

If your goal is to call a callback only when each step occurs in the ease, you could tap into the onUpdate. Here's a helper function I whipped together for you: 

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

 

function myCallback() {
  console.log("changed!");
}

gsap.to(".box", {
  y: "-=50",
  ease: "steps(16)",
  duration: 5,
  onUpdate: onStep(myCallback)
});

function onStep(callback) {
  var last = 0;
  return function() {
    this.ratio !== last && callback.call(this);
    last = this.ratio;
  };
}

Is that what you're looking for? 

 

But like the other guys said, there's probably a better way to accomplish what you're after; we're not sure WHY you're asking for something like this so once we understand better we can offer some advice. Most likely a stagger is a good fit.

  • Like 2
Link to comment
Share on other sites

Hi All. Thank You for all Your responses.

 

@ZachSaucier @PointC
Unfortunately i cant provide a proper codepen, due to all this code being in animate cc. However i did record a small demo gif, demonstrating more or less, what im trying to achieve.

 

I do believe the stagger and steppedEase is the key. I will try to explain this demo.

 

General purpose of this script is to automate an animation like in the gif.

Im putting all the letters into an array using a for() loop, so from this point i can conveniently use a single like with gsap:

TweenMax.staggerFrom(textArray, .5, {y:"+=10", alpha:0, ease:SteppedEase.config(16), 1);

 

The next step would be to fire the arrow tween animation, at the .x coordinate of a corresponding letter. (i all ready got all the .x positions of each letter stored in a separate Array thanks to the initial for loop).

So, in my mind, the tween, for the Arrow, would need to look more or less like that:

.set(arrow,{x:positionXArray[currentLetter]})
.from(arrow,.5,{y:"-="+30,alpha:0, ease: Power2.easeOut}, 1 , 
  onComplete:function() {
        // tween for arrow disapearing goes here
      }
    });
currentLetter++

 However i would need to know, when to fire the function above. It should fire when a letter appears and only a total of letter numbers times.

The onUpdate callback, tigers much more times than a numbers of letters (even with a SteppedEase), making this approach invalid.

 

@GreenSock

This function looks very promising. But when i tested it,  the function myCallback() didn't trigger at all, and console was not showing any "changed!" string.

function myCallback() {
  console.log("changed!");
}

 

Best regards.

2020-05-28-ni0BjSZd8m.gif

Link to comment
Share on other sites

3 minutes ago, eden said:

General purpose of this script is to automate an animation like in the gif.

I'd split the text into each letter using SplitText, then loop through each (non-space) letter and create a timeline for it. In that timeline I'd set the position of the arrow and fade in and up the letter. Then I'd add that timeline to a master timeline so that it's sequenced. 

  • Like 2
Link to comment
Share on other sites

24 minutes ago, eden said:

This function looks very promising. But when i tested it,  the function myCallback() didn't trigger at all, and console was not showing any "changed!" string.


function myCallback() {
  console.log("changed!");
}

 

Are you saying that in the demo I provided, you see no "changed" in the console? I just triple-checked and it works perfectly for me. Can you please provide a reduced test case that shows it not working? I suspect maybe you tried it in your own environment and didn't implement it correctly.

 

And yeah, I'd probably take the approach @ZachSaucier recommended. You really shouldn't need to be populating a separate Array with x-coordinates and that kind of thing. I'm pretty sure there's a much easier way to approach this that'd be more dynamic and easy to maintain. 

  • Like 2
Link to comment
Share on other sites

I glanced at your code and the callback is doing exactly what you asked it to, but it sounds like there's just a misunderstanding about your goal...

 

I thought you wanted to fire a callback every time the SteppedEase changed values (took a step). But now it sounds like you want something totally unrelated to the SteppedEase - do you want a callback triggered every time the next letter starts animating? 

 

Also keep in mind that you're doing a TweenMax.staggerFrom() (with the old, GSAP 2 syntax) which creates a tween for EACH element. Your onUpdate would be on each of those tweens. So if you've got 10 letters, that's 10 onUpdates. 

 

It's much, MUCH more efficient to provide demos in CodePen instead of uploading files. It's free and quite easy. Have you tried it? You'll love it. Everyone can instantly see the code, play with it, and see the effects without chucking files around. 👍

  • Like 1
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

do you want a callback triggered every time the next letter starts animating? 

Yes, exactly that ! Im sorry for bad explaining. I just need to know, when to fire next arrow animation (so when staggerFrom decides its the next object to animate)

- Im aware of gsap 3.0, but in this project i need to stay with the old one, as others collages are working in that too.

- Will learn to use codePen, promise !

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