daledesilva

Thanks @ZachSaucier! I'm definitely trying to achieve the latter (animate all of the bars when the chart comes into view). I was heading toward a single ScrollTrigger and using the onEnter event as an instigator to create to animations on all at once with a delay, however, stagger and timeline sound more appropriate. For some reason I assumed stagger wouldn't let me specify the order... but I hadn't checked yet - I will try those and post back examples! Thanks!

Thanks @Visual-Q It's worth noting for anyone who also stumbles across this, @Visual-Q has also set the element to be hidden by default in the CSS and added a line for autoAlpha to turn it back on. These are important, otherwise the bar is visible in it's full position until it starts animating. I've made a few changes though in a new example: I've changed autoAlpha to opacity because I don't need to hide it entirely, just visually until the animation starts. ie. If the JS screws up and doesn't run, it should still be visible to screen readers. I've removed opacity:0 from the CSS so that it's visible by default and then I immediately set it to invisible in JS - that way if the user has JS off, they still see the bar chart as normal - just without animation. There's probably better ways to handle this (especially since it means there's a slightly delay before hte JS opacity is applied), but I've kept it like this for now. The example above doesn't work with scrolling anymore because the visibility is just set to a delay, so I've put the scrollTrigger into the opacity command as well. This works, but I'm sure it's over engineered. Really, if delay simply worked the code would be far simpler - so I'm sure there's something basic that I'm missing. @Visual-Q, you mentioned you weren't entirely sure what I was planning to do? Can I ask what you mean? Is there another approach entirely that you recommend? https://codepen.io/daledesilva/pen/bGBxXPK

Hi, I'm trying to create an animated bar chart that should only animate its barse when scrolled into view. I use jquery to target each chart on the page, then iterate through each set and the bars in each set to set each bar to trigger its animation when the chart as a whole scrolls into view. Each bar is also given an increasing delay so that the cascade on. The problem is, the delay doesn't get applied if scrollTrigger is being used. In the codepen, if you comment out the scrollTrigger lins (26-29), you'll see the delay works. What am I missing here to get this to work? Or is there a more performant/appropriate way to go about this?