Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pierrest

Scroll trigger on repetitive blog structure

Recommended Posts

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

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

  • Like 3
Link to comment
Share on other sites

Thank you all, that's exactly what i needed.

Have a nice day.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×