Need a nudge in the right direction for chart animations on scroll

[ThePixelPixie]

I'd like to make this set of charts more interactive, by, for instance, as you scroll the page, the information in the Gender Divrsity group would stay in the middle of the screen, but as you scroll, the shapes would fill and the numbers would iterate up. And then kind of the same idea with the Racial/EthnicDiversity group (which would be underneath the gender group) - where the blue fills in to a given percentage, the number iterates up, and the bars scroll across.

 

I know this probably starts with the scrolltrigger. But I'm not really sure where to start, still being a novice with gsap.

[PointC]

Sounds like you're looking for ScrollTrigger pinning. There are a whole bunch of demos to get you started.

https://greensock.com/st-demos/

 

When building ScrollTrigger animations it's best to create the animations first (no ScrollTrigger). Once you're happy with those, it's fairly easy to wire them up to ScrollTriggers. Doing both at the same time can be a bit overwhelming when you're new to GSAP.

 

Happy tweening.

 

[Cassie]

Heya!

 

Best advice I have would be to start by making the animations without scrollTrigger. Then hook them up afterwards.

It definitely looks like SVG will be what you're after here.

There's a lot of different questions here. (and different animations) Which one would you like to focus on first? Do you already have graphics?

[ThePixelPixie]

@Cassie - I think I want to start with the Gender Diversity group. I have SVGs of the shape. I have not created the html layout yet. So I guess I should work on that then come back here to see where I should go from there. I think I'm a little confused what you and @PointC are saying about building the animations first. Obviously I'm still a newbie with this system. But I kind of assumed that the animation would trigger a fill going across the SVGs until it stops at whatever trigger point is set. So in my mind, that feels like the animation is part of the scrolltrigger? Am I misunderstanding that process?

[PointC]

ScrollTrigger will drive the animation if you set scrub:true. Otherwise, it will just start the animation when you hit the trigger.

 

So you create your tweens and timelines just like a normal animation. Get it looking just right and then decide how it will be triggered and if you'll use scrub or not. If you are going to use scrub:true, I'd recommend a "linear" or "none" ease.

 

Does that make sense?

[ThePixelPixie]

Ok. I've laid this out, and gotten *some* animations going. But I'd like them not to start until the area (Workforce at a Glance) are in view, and then the animations progress as you scroll further, with the area still in view. After all animations have fired, they can keep scrolling down. I'm just really not sure how to make all that happen, or if I've done the right animations to begin with.

 

See the Pen qBxWJNb by ThePixelPixie (@ThePixelPixie) on CodePen

[PointC]

Here's a basic wire-up with ScrollTrigger.

 

See the Pen 154c29357e40925ee9e84028ade0e10c by PointC (@PointC) on CodePen

 

A few other notes.

• I combined your three stand-alone gradient tweens into one as they were all the same. 
• I put everything on a timeline with one ScrollTrigger, but you can certainly keep them separate. (You can have as many ScrollTriggers as you like.)
• No need to set yoyo to false. Also no need to set repeat:0 or repeatDelay with no repeats.

 

Hopefully that helps. Happy tweening.

 

PS Definitely go through ScrollTriggers demos as there are lots of good ideas in there. Have fun.

[ThePixelPixie]

@PointC - THANK YOU!!! I'm going to play with this today and try to figure it out. Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.

[Cassie]

This is such a nice comment 🥺