Jump to content
GreenSock

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

Update a staggered array of numbers with OnUpdate

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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Sounds like you learned a lot to me :) 

Share this post


Link to post
Share on other sites

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

 

 

  • Like 4

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
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)? 

Share this post


Link to post
Share on other sites

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?

Share this post


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

Share this post


Link to post
Share on other sites

It will work the same way as innerHTML, but I think it's better to use textContent.

 

 

 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Yep. 👍

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Hey @mvaneijgen,

 

Take a look at these explanations

 

Happy snapping ...

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

@mikel that is fine, but from that I would never have guest I could use it in a `.to()` function. 

  • Like 1

Share this post


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

  • Like 4

Share this post


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.

×