Jump to content
Search Community

GSAP3 delay not working with scrollTrigger

daledesilva test
Moderator Tag

Recommended Posts

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?

See the Pen bGBxXPK by daledesilva (@daledesilva) on CodePen

Link to comment
Share on other sites

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?

 

See the Pen bGBxXPK by daledesilva (@daledesilva) on CodePen

Edited by daledesilva
Clarification on CSS
Link to comment
Share on other sites

Hey daledesilva. A few notes about your code:

  • I'd combine your .set() and .from(). You could use the onStart callback of the tween to set a property if you need to.
  • I'd use once: true on your ScrollTrigger so it only runs one then cleans itself up.

With that being said, what's your end goal? To animate each bar when it comes into view or to animate all of the bars when the chart comes into view? What you currently have set up is closer to the former but your effect is more for the latter... 

 

If you're trying to do the former I would probably use ScrollTrigger.batch(). If you're trying to do the latter I would change how you're setting it up to use a single ScrollTrigger and a single tween with stagger or timeline.

Link to comment
Share on other sites

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!

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