Pierrest Posted August 24, 2021 Share Posted August 24, 2021 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++ }); } Link to comment Share on other sites More sharing options...
Cassie Posted August 24, 2021 Share Posted August 24, 2021 Hey there Pierrest, Welcome to the forums. 🥳 This is one of the common scrollTrigger mistakes - this article will helphttps://greensock.com/st-mistakes/#generic 2 Link to comment Share on other sites More sharing options...
Carl Posted August 24, 2021 Share Posted August 24, 2021 Here's a bonus demo for you from my course ScrollTrigger Express Once you build your ScrollTriggers for each element in the loop, you can target child elements using querySelector() This demo might help if you want to animate multiple items in each blog post section. See the Pen b0b8e9c4a880b97379630f2ab9561407 by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
Pierrest Posted August 25, 2021 Author Share Posted August 25, 2021 Thank you all, that's exactly what i needed. Have a nice day. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now