Jump to content
Search Community

Update a staggered array of numbers with OnUpdate

michaelh test
Moderator Tag

Recommended Posts

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

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

  • Like 3
Link to comment
Share on other sites

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

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

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

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? 

  • Like 1
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...