michaelh Posted July 14, 2020 Share Posted July 14, 2020 Hi, I'm trying to figure out how I can animate up a series of numbers using stagger. I have a good working update of a single number: var countVal = {val:0}, newVal = 55; tl.to(countVal, 2, { val:newVal, roundProps:"val", onUpdate:function() { document.getElementById("graphic-statisticOverDna-number").innerHTML=countVal.val } }); However, I cannot get a series of numbers to update, staggered, whether I try to tween a series of {val:0} and have them update different elements on OnUpdate, or, as shown in the Codepen URL, if I try to tween the series of elements and update an internal value. The reason I'm interested in stagger is that I am trying to match them to some growing chart bar tweens (which work perfectly as they're just animating the width property.) I seem to be missing the right way to animate several elements containing a number or text without duplicating my working code above several times. Can anyone see what I'm doing wrong? See the Pen ExPeVGN by michaelck (@michaelck) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Hey Michael and welcome to the GreenSock forums! We highly recommend that you use the newer GSAP 3 syntax as it's sleeker and allows you to use some new features like defaults. GSAP 3 also has a newer and better SnapPlugin that replaces the RoundPropsPlugin. I'm not quite sure I understand what you're trying to do. Are you trying to do something like this? See the Pen pogOyLK?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
michaelh Posted July 14, 2020 Author Share Posted July 14, 2020 Hey, thanks for looking at this! Wow, yes, that's exactly what I was trying to accomplish. I clearly did not understand several things here. a) I do need to be tweening the values, not the elements, b) I don't need to create a fancy object structure for current values, just use an array of numbers, c) I can't just pass gsap.utils.wrap() in as end values; I need to return the right value myself given the index, d) I should be looping through all the targets on onUpdate instead of in stagger{onUpdate = function() {}, and e) getting the syntax right for this.targets(). And updating this site to gsap 3 syntax and setting up a transpiler so I can use ES6. Did I miss anything? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Sounds like you learned a lot to me Link to comment Share on other sites More sharing options...
OSUblake Posted July 15, 2020 Share Posted July 15, 2020 A simpler way to do this. const wrap = gsap.utils.wrap([54,48,46,38,31,30,17]); gsap.to('.graphics-chart-total', { textContent: wrap, snap: { textContent: 1 }, stagger: 0.2 }); See the Pen c17e292cbd7a3f3037b6bd4f80d24315 by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
OSUblake Posted July 15, 2020 Share Posted July 15, 2020 @GreenSock Can you explain the rules of when gsap animates an element's property? I remember you going over this in the old gsap 3 forum, but those posts are gone, and I totally forgot. Link to comment Share on other sites More sharing options...
GreenSock Posted July 15, 2020 Share Posted July 15, 2020 1 hour ago, OSUblake said: @GreenSock Can you explain the rules of when gsap animates an element's property? I remember you going over this in the old gsap 3 forum, but those posts are gone, and I totally forgot. Are you asking about how it decides whether to animate the direct property on an element (like element.property) instead of the CSS style property with the same name (like element.style.property)? Link to comment Share on other sites More sharing options...
OSUblake Posted July 15, 2020 Share Posted July 15, 2020 Yeah, I totally forgot how you said it works. Like why did it know to use textContent as a property of the element and not the style? Link to comment Share on other sites More sharing options...
michaelh Posted July 15, 2020 Author Share Posted July 15, 2020 1 hour ago, OSUblake said: textContent Oh man, I spent so long last night looking for this. I think it’d be a good section or page in the documentation, if that’s on the table. I’m curious why this works but innerHtml needs the intermediate onUpdate step as well. Link to comment Share on other sites More sharing options...
OSUblake Posted July 15, 2020 Share Posted July 15, 2020 It will work the same way as innerHTML, but I think it's better to use textContent. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 15, 2020 Share Posted July 15, 2020 6 minutes ago, OSUblake said: Yeah, I totally forgot how you said it works. Like why did it know to use textContent as a property of the element and not the style? Basically if it's a DOM element it will assume you want to animate CSS properties...but if you define one that doesn't exist, it'll fall back to checking for a regular property directly on that element with that name. If you need to do something unusual and delineate exactly which thing you mean, you can use the css:{} wrapper: gsap.to(".class", { width: 100, // direct property css: { width: 100 // CSS } }); Is that what you meant Blake? 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 15, 2020 Share Posted July 15, 2020 Yep. 👍 Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 15, 2020 Share Posted July 15, 2020 Where can we find info about the `snap:` property? I can't seem to find it in the docs and if I google it I get only topics for draggable. Link to comment Share on other sites More sharing options...
mikel Posted July 15, 2020 Share Posted July 15, 2020 Hey @mvaneijgen, Take a look at these explanations Happy snapping ... Mikel 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 15, 2020 Share Posted July 15, 2020 @mikel that is fine, but from that I would never have guest I could use it in a `.to()` function. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 2 hours ago, mvaneijgen said: from that I would never have guest I could use it in a `.to()` function. Snap has both a utility method and is a core plugin. The core plugin docs are more relevant in this case. 4 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