ScrollMagic - always animate first item first - gsap

Question

Is there a way to ensure that the first item that appears always scrolls in first - using this code? At the moment it fires depending on the order of the elements. I am asking because the order of the elements changes throughout the site - I would rather not create a new scene for every different scenario. Someone might see a clever way of doing this. Thanks for any help in advance.
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
h2 = $(elem).find('h2');
h3 = $(elem).find('h3');
btn = $(elem).find('.btn');
p = $(elem).find('p');
img = $(elem).find('img');
span = $(elem).find('span.js-fade-order');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.fromTo(span, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.3, "start")
.fromTo(h2, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
.fromTo(img, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.9, "start")
.fromTo(h3, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.2, "start")
.fromTo(p, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.5, "start")
.fromTo(btn, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.8, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});

Answer 1

$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.staggerFromTo(fadeElem, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});