RobbieC Posted August 29, 2021 Share Posted August 29, 2021 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 More sharing options...
GreenSock Posted August 30, 2021 Share Posted August 30, 2021 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. 👍 7 Link to comment Share on other sites More sharing options...
RobbieC Posted August 31, 2021 Author Share Posted August 31, 2021 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 More sharing options...
GreenSock Posted August 31, 2021 Share Posted August 31, 2021 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 More sharing options...
RobbieC Posted August 31, 2021 Author Share Posted August 31, 2021 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 More sharing options...
GreenSock Posted August 31, 2021 Share Posted August 31, 2021 That should all be doable. You can call those functions within your ScrollTrigger.matchMedia(). And again, it should be relatively easy to parameterize whatever you need. I'm sure there's some organization you'll need to do, though. Good luck. Link to comment Share on other sites More sharing options...
Cassie Posted August 31, 2021 Share Posted August 31, 2021 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. 👍 1 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