Jump to content
Search Community

ScrollTrigger start position question

RobbieC test
Moderator Tag

Recommended Posts

I wanted to know if there was a simpler way of adjusting the 'start' position of a scrolltrigger, instead of using ScrollTrigger.mediaMatch and duplicating all the code to only change 1 line. Example:

gsap.to(".first", {
  duration: 1,
  autoAplha: 1,
  yPercent: 0,
  scrollTrigger: {
    trigger: container,
    start: "top 60%",
    end: "bottom bottom",
    toggleActions: "play none none reverse"
  }
});

So if I wanted to just change "top 60%" to "top 80%" for max-width: 768px.  Instead of doing:

ScrollTrigger.matchMedia({
   // desktop
  "(min-width: 769px)": function() {
    gsap.from(".first", {
    duration: 1,
    autoAplha: 1,
    yPercent: 0,
    scrollTrigger: {
      trigger: container,
      start: "top 60%",
      end: "bottom bottom",
      toggleActions: "play none none reverse"
    }
  }, { 
     // mobile & tablet
  "(max-width: 768px)": function() {
    gsap.from(".first", {
    duration: 1,
    autoAplha: 1,
    yPercent: 0,
    scrollTrigger: {
      trigger: container,
      start: "top 80%",
      end: "bottom bottom",
      toggleActions: "play none none reverse"
    }
  });

It's not bad when its a simple single scrolltrigger, but when I have a project with lots of scrolltriggers and I need to adjust the start position for mobile on all of them, it will be a lot of extra code. Is there simpler/easier way?

 

Link to comment
Share on other sites

If I were you, I'd just use a function and then parameterize whatever you want: 

 

ScrollTrigger.matchMedia({
   // desktop
  "(min-width: 769px)": build("top 60%"),
     // mobile & tablet
  "(max-width: 768px)": build("top 80%")
});
    
function build(start) {
  return function() {
    gsap.from(".first", {
      duration: 1,
      autoAplha: 1,
      yPercent: 0,
      scrollTrigger: {
        trigger: container,
        start: start,
        end: "bottom bottom",
        toggleActions: "play none none reverse"
      }
    });
  };
}

That way, you avoid repeating things and you keep all your code nice and tidy. 👍

  • Like 7
Link to comment
Share on other sites

Thanks Jack!

 

I decided to try something a little different, my project is a little more complex than the example I gave above. This option I feel would work best for my situation, I just declare it at the top of my file:

let startPosition;
if (window.matchMedia("(max-width: 768px)").matches) {
  startPosition = 'top 80%'; // mobile
} else {
  startPosition = 'top 60%'; // desktop
}

Then I just replace 'top 60%' on all my scrolltriggers with startPosition. I haven't fully tested it yet, but we shall see.

Link to comment
Share on other sites

You can do it that way, but you'll need to make sure you destroy all your ScrollTrigger instances and re-create them correctly when the window changes sizes and hits a different breakpoint. One of the major conveniences of ScrollTrigger.matchMedia() is it does all that for you. But it's up to you :)

Link to comment
Share on other sites

Oh, well you do make a good point!

 

I'll have to figure out how to work in your example, cause all of my scrolltriggers/tweens are already nested inside of individual functions, broken down into each section of the page, kind of like:

function init() {
  // code code code
  // onComplete: () => initContent()
}
init();

function initContent() {

  calcStyles();
  initIntro();
  initProjects();
  initClients();
  initServices();
  initInvest();
  initInitiatives();
  initCTAs();
  initFooter();

}

function initIntro() {
 // all tweens/scrolltriggers for this section 
 // each init function is the same idea
}

 

Link to comment
Share on other sites

This is so nice. I love this

 

On 8/30/2021 at 6:40 AM, GreenSock said:

If I were you, I'd just use a function and then parameterize whatever you want: 

 

ScrollTrigger.matchMedia({
   // desktop
  "(min-width: 769px)": build("top 60%"),
     // mobile & tablet
  "(max-width: 768px)": build("top 80%")
});
    
function build(start) {
  return function() {
    gsap.from(".first", {
      duration: 1,
      autoAplha: 1,
      yPercent: 0,
      scrollTrigger: {
        trigger: container,
        start: start,
        end: "bottom bottom",
        toggleActions: "play none none reverse"
      }
    });
  };
}

That way, you avoid repeating things and you keep all your code nice and tidy. 👍



 

  • Thanks 1
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...