Play/Pause Css animation with GSAP Scroll trigger

Question

There are many CSS animations on this website, resulting in a slow page performance. As a solution, I am integrating GSAP scroll-trigger to play these only when in view. I have the same thing for videos and I have basically adapted the code to play/pause CSS instead of videos. If I add the CSS to the animation ('-webkit-animation-play-state','paused') it pauses, however using the function below I get this error:

allCss.css is not a function

const allCssAnimation = gsap.utils.toArray('.ticker-marquee h2')
allCssAnimation.forEach(function(allCss, i) {
  ScrollTrigger.create({
    trigger: allCss,
    start: 'top center',
    end: 'bottom center',
    markers: true,
    onEnter: () => allCss.css('-webkit-animation-play-state','running'),
    onEnterBack: () => allCss.css('-webkit-animation-play-state','running'),
    onLeave: () => allCss.css('-webkit-animation-play-state','paused'),
    onLeaveBack: () => allCss.css('-webkit-animation-play-state','paused'),
  });
})