Jump to content
GreenSock

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

ScrollTrigger for repeating sections

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 post
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 post
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 post
Share on other sites

Hey Jeff. Make sure that the pen loads the resources that you need :) Here's how I'd do it:

See the Pen ZEQzJyP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you are creating more dynamically  after he page was initiated (like I thought originally when reading your first post) then you'd have to handle that.

  • Like 1
  • Thanks 1
Link to post
Share on other sites

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 post
Share on other sites

 

Hey @kobracode

 

It is very hard to try and help you just from the code that you've posted.

Please create and share a minimal demo that we can have a look at.

 

  • Like 1
Link to post
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 post
Share on other sites

yea sure, i updated on the pen above!

but the gap on the second repeater still doesnt' work and i got a huge white gap.

 

Screenshot 2021-01-08 at 7.36.15 PM.png

Link to post
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 post
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 YzGjQgR 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 post
Share on other sites
2 minutes ago, akapowl said:

Is the .sort-method still a thing

Yep, it's still a thing. You can check yourself by logging ScrollTrigger.sort. Maybe you were using it incorrectly?

Link to post
Share on other sites
9 minutes ago, 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 YzGjQgR 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 post
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 post
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 post
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.

×