eden Posted May 26, 2020 Share Posted May 26, 2020 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 More sharing options...
ZachSaucier Posted May 26, 2020 Share Posted May 26, 2020 Hey Eden. No, there's not a callback for steps within an ease. However, you can likely either use GSAP's staggers to do what you're wanting to do. Can you please create a minimal demo of what you're trying to accomplish using CodePen? This thread talks more about how to do so: Link to comment Share on other sites More sharing options...
PointC Posted May 26, 2020 Share Posted May 26, 2020 I'm not really following the question. What is the expected result here? As @ZachSaucier mentioned, a demo would be most helpful. Here's a simple example with stagger and a stepped ease. This is also using the new GSAP 3 syntax. See the Pen ExVzNRO by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted May 27, 2020 Share Posted May 27, 2020 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. 2 Link to comment Share on other sites More sharing options...
eden Posted May 28, 2020 Author Share Posted May 28, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 28, 2020 Share Posted May 28, 2020 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. 2 Link to comment Share on other sites More sharing options...
eden Posted May 28, 2020 Author Share Posted May 28, 2020 A multiple timelines nested in a master timeline, approach could work! Nice idea, will try that tomorrow. Thanks! Link to comment Share on other sites More sharing options...
GreenSock Posted May 28, 2020 Share Posted May 28, 2020 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. 2 Link to comment Share on other sites More sharing options...
eden Posted May 31, 2020 Author Share Posted May 31, 2020 @GreenSock While il continue to try the @ZachSaucier Idea. Here the demo for You. I stripped all unnecessary code and custom templates. You ware right i implemented it in the wrong way. Now the console does trigger a string, but still more times than it needs to (for every letter, triggers 16 times) Best regards. demo_forum.zip Link to comment Share on other sites More sharing options...
GreenSock Posted May 31, 2020 Share Posted May 31, 2020 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. 👍 1 Link to comment Share on other sites More sharing options...
eden Posted May 31, 2020 Author Share Posted May 31, 2020 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 More sharing options...
GreenSock Posted May 31, 2020 Share Posted May 31, 2020 Ah, then a simple onStart should work. 3 Link to comment Share on other sites More sharing options...
eden Posted May 31, 2020 Author Share Posted May 31, 2020 Omg. Works like a charm. Thank You very much ^ o^ 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now