Jump to content
Search Community

ScrollTrigger for repeating sections

jeffdfarr test
Moderator Tag

Recommended Posts

I have a media-with-text component that can be created multiple times in a page. What would be the most efficient way to trigger an animation each time that component comes into view? The below code is failing.

 

$(".media-with-text").each(function() {
 
var media = $(this).find("img");
 
gsap.from(media, 1.5, {
ease: "power3.out",
opacity:0,
scale:1.15,
scrollTrigger: {
trigger: this,
}
});
 
});
Link to comment
Share on other sites

This seems to get me closer but now the 1st media-with-text component fires when you pass the second instance

 

gsap.utils.toArray(".media-with-text").forEach((section, i) => {
 
var image = "media-with-text img";
 
gsap.from(image, {
duration: 1.5,
ease: "power3.out",
opacity:0,
scale:1.15,
scrollTrigger: {
trigger: section,
}
});
});
Link to comment
Share on other sites

Hey jeffdfarr and welcome to the GreenSock forums! Thanks for supporting GreenSock by being a Club GreenSock member.

 

How to do this depends on when the above is being called. Can you please create a minimal demo of the issue? This thread talks more about how to do so:

 

Link to comment
Share on other sites

  • 7 months later...

Hello, i need to use repeater for section text, but something works wrong with textTitle and textText, they apply the animation only on the first span.

Any suggestion?

});
    gsap.utils.toArray(".section--text").forEach((section) => {
      const tls = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          scroller: ".o-scroll",
          scrub: true,
          start: "top top",
          end: "+=500%",
          pin: true,
        },
      });

      const delay = 0.2;

      const textTitle = section.querySelector(".fade-up-title span");
      const textText = section.querySelector(".fade-up-text span");

      tls
        .to(textTitle, { duration: 1, autoAlpha: 1, y: 0, stagger: delay }, 0)
        .to(textText, { duration: 1, autoAlpha: 1, y: 0, stagger: delay }, 1)
        .to(textTitle, { duration: 1, autoAlpha: 0, y: -200 }, 3)
        .to(textText, { duration: 1, autoAlpha: 0, y: -200 }, 3);
    });

 

Link to comment
Share on other sites

 

If you have multiple elements you need to address, .querySelector('.whatever-element') won't work.

You'll need to use .querySelectorAll('.whatever-element).

 

      const textTitle = section.querySelectorAll(".fade-up-title span");
      const textText = section.querySelectorAll(".fade-up-text span");

 

Does that help?

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

43 minutes ago, kobracode said:

i updated on the pen above

Please use the "fork" button when creating new versions of demos that you've shared to these forums. That way your posts have their full context for future readers. 

 

You're making one of the most common ScrollTrigger mistakes - using general selectors when you should be looping through each section, creating an animation and ScrollTrigger for each. The linked post covers how to do that :) 

Link to comment
Share on other sites

 

Actually, I think, the issue comes from having multiple pins, that are not being created in the order, that they appear on the page.

(First those for all the .text-sections then the one for the .testing sections)

 

I just added a refreshPriority: 0 to one of the ScrollTriggers for the section.testing (which will cause ScrollTrigger to do a .sort() ) and it resolves the issue.

 

See the Pen 8a3fde0fb95ad685f977702c2f323c17 by akapowl (@akapowl) on CodePen

 

 

@ZachSaucier

Is the .sort-method still a thing, or is it only possible to trigger a sorting when a ScrollTrigger has a refreshPriority set?

...because I tried ScrollTrigger.sort() after the setting up of all ScrollTriggers and it didn't do anything.

 

I remember from one of my earlier questions that it once was a thing.

 

 

 

  • Like 1
Link to comment
Share on other sites

On 1/8/2021 at 7:52 PM, ZachSaucier said:

Maybe you were using it incorrectly?

 

Yeah, that can be the case for sure.

I'm a bit short on time. 🙈

 

Edit:

I definitely was :D 

Putting the ScrollTrigger.sort() at the very end (after the adding of the eventListener for locomotive-scroll and the .refresh() works just fine. I had tried putting it in before those before.

 

See the Pen 8a3fde0fb95ad685f977702c2f323c17 by akapowl (@akapowl) on CodePen

 

 

Wit this, the refreshPriority is not actually neccessary anymore on the ScrollTrigger, I put it on before @kobracode.

Might be an interesting read for you anyways (from the docs):

 

refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

 

Link to comment
Share on other sites

thanks! that works for me! I need to ask i am trying to find a solution for the section.text to apply the full animation when on view of the section, and not step by step on scroll. When in view the full animation completes then pin and when exit fade-up

Link to comment
Share on other sites

 

If you want an animation to not be scrubbing but play away instantly when it hits a certain trigger, you should remove the scrub on your ScrollTrigger and either use toggleActions or the callback-system of ScrollTrigger to control when an animation is to be played in what way.

 

Please read more about that in the docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

  • Like 3
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.
×
×
  • Create New...