Thank you I exactly want to have that effect but I didn't mention this, I am using ScrollMagic as well and I need to have this effect for a couple of groups of these quick-info-items, it is a scroll animation that occurs on scroll, I dont want to write a code for every one of these groups ..
so here is my actual code:
function fade_scroll_animation() {
var $anim_scroll = $(".fade-scroll"),
$anim_text_g = $(".anim-text"),
anim_time = .7,
anim_stagger = 0.1,
initial_delay = 0.1,
easing = Power2.easeInOut,
elem_from_top = false,
elem_y = "40";
$anim_scroll.each(function() {
var $this = $(this),
$anim = $this.find(".anim-text");
var tl = new TimelineMax();
tl.staggerFrom($anim, anim_time, { y: elem_y, opacity: 0, ease: easing, delay: initial_delay }, anim_stagger);
scene = new ScrollMagic.Scene({
triggerElement: this,
// triggerHook: "onEnter",
})
.setTween(tl)
.addIndicators()
.addTo(scrollMagicController)
.reverse(true);
});
}
fade_scroll_animation();
I have to start the function with this : $anim_scroll.each(function() { ... )}
then I have to write a Tween for it which somehow gets an array of items inside .quick-info-item and the staggers them while staggering the .quick-info-item elemnts themselves
I'm not sure if it's possible