Staggering li's and their bullet points.

[JPM82]

I'm using GSAP to animate in some li's and their bullet point counterparts (using the CSSRule plugin).  I'd like each bullet point to animate in directly after the li, and for the rest to do that same.  Basically, the next li will start to come in just as the previous li's bullet point has finished.  Currently, however, the li's come in and then the bullet points come in when the li's have completed.  Anyone know I can achieve this???

See the Pen gOXjbXa by Gemini7401 (@Gemini7401) on CodePen

[elegantseagulls]

There are a few ways to do this, but I think for control sake, you can run an onComplete callback inside your li stagger to tween the after element, so it'd look something like this:

gsap.to(".service-styles--list li", {
  x: 0,
  opacity: 1,
  duration: 1.5,
  stagger: {
    each: .5,
    onComplete: function(){
      gsap.to(this.targets()[0], {'--bullet-opacity': 1, '--bullet-translate': 0})
    }
  },
})

It'll be more performant to animate a CSS custom property that's applied to the after element, than it will be to animate the ::after element directly with the CSSRulePlugin.

[GreenSock]

Yep, @elegantseagulls is right on. I'd definitely recommend using CSS variables. The onComplete idea is good, and here's an alternative: 

See the Pen VwrBeVw?editors=0010 by GreenSock (@GreenSock) on CodePen