Hello everybody,
I would like to make an action on each post of a blog when they enter the viewport.
i did the following, but the event is fired on all elements with the .blog-item class, i would like to be fired only when each blog-item element enter the viewport, could it be possible to pass something like "this" in jQuery from the ScrollTrigger?
Thanks all.
let articles = gsap.utils.toArray($(".blog-item > *"));
ScrollTrigger.create({
start: "bottom bottom",
trigger: ".blog-item",
onEnter: articleApparition
});
function articleApparition() {
let init= 1;
articles.forEach(function(section){
let delais = init * 0.7;
gsap.to(section, {
opacity:1,
duration:2,
delay: delais,
ease:"power1.out"
});
init++
});
}