Delay on from() inside a ForEach: does not work?

[cheestudio]

What I am trying to do:

 

I want to try and create a small function/snippet that I can use to control scroll-based (using ScrollTrigger) animations around the site using inline data attributes, so I can get mix up the animations, without having to have multiple functions running. I mostly just need to use X position and Delay (might expand this to some other attributes later).

 

Where I'm stuck:

 

The position works a treat and I can loop through the elements, grab their associated values and run the tween. The delay will not work, though. I thought maybe it's something to do with the data attribute (although I couldn't see why), so I also tried just placing a hard coded numerical value, and the delay is ignored entirely within this loop.

 

What I've tried:

 

I've scoured the Googlewebz and docs. I also tried the "stagger" idea, but that doesn't work inside a ForEach, but rather when you pass a group of elements as the selector. The problem with that method, though, is that I need to grab the individual data attributes so I can change the element's animation values on a per-element basis (both of which are stored as data attributes).

 

I have the Codepen attached for your review, as well as my JS here. Open to any and all suggestions on how I can achieve this. Thank you in advance!

 

var groupedFade = gsap.utils.toArray(".fade-group");

groupedFade.forEach(function (group) {
  var elements = group.querySelectorAll(".fade-group-entry");

  elements.forEach(function (element) {
    var positionValue = parseInt(element.getAttribute("data-position"));
    var delayValue = parseInt(element.getAttribute("data-delay"));
    gsap.from(element, {
      scrollTrigger: {
        trigger: group,
        start: "top 90%"
      },
      autoAlpha: 0,
      x: positionValue,
      duration: 1.5,
      ease: "power3.inOut",
      delay: delayValue
    });
  });
});

 

See the Pen vYxzbmX by CheeStudio (@CheeStudio) on CodePen

[akapowl]

Hey @cheestudio

 

There actually was a problem with delays on ScrollTriggered animations in 3.6.1 (which you are using here).

 

 

 

 

 

It was resolved for the next upcoming version which is supposed to be released within the next week or two if I am not mistaken.

 

I threw in the beta files into your example it looks like it's working like a charm with those.

 

See the Pen 88b32db966dabe47341257d3fd6e88d3 by akapowl (@akapowl) on CodePen

 

[cheestudio]

YES! Awesome! And double yes that I'm not going crazy and/or missing something. Thankfully this site isn't launching for at least another 3 weeks, so I'll proceed and then patch when the update is released. 💪

 

THANK YOU! 👍