Terio Posted July 7, 2022 Share Posted July 7, 2022 Hello, I've been learning about gsap for a little and just started with ScrollTrigger plugin. It works great for me, but I stumbled upon something I'm not able to sort out. I have a grid with two columns. When you scroll one of the columns, the whole grid zooms in. That works fine. What I can't do, is to zoom out the grid to its default position only if both of these columns are scrolled to the top. On page load div is zoomed out Left column - scrolled, right column - initial => zoom in Left column - initial, right column - scrolled => zoom in Only zoom out if: left column - initial, right column - initial I'm sorry, but I'm not able to post the code here as it's complicated and it has elements I would have to upload to a hosting server. Here is how the design looks like: Here is my code: // EXPAND TIMELINE var expand = gsap.timeline({}); expand.to(".book-window", {border: 0, borderRadius: 0, duration: 0.5, width: "100vw", height: "100vh", margin: 0, padding: 0, bottom: 0}, 0) expand.to(".info", {borderRadius: 0}, 0) expand.to(".form", {borderRadius: 0}, 0) // EXPAND BOOK WINDOW // media query const outputElement = document.getElementById("info"); // for less than x px const smallDevice = window.matchMedia("(min-width: 800px)"); smallDevice.addListener(handleDeviceChange); // expand functions function handleDeviceChange(e) { if (e.matches) { ScrollTrigger.create({ scroller: '.info', animation: expand, trigger: ".info-header", start: "top top", toggleActions: "play none none reverse", markers: true }) ScrollTrigger.create({ scroller: '.form', animation: expand, trigger: ".form", start: "top top", toggleActions: "play none none reverse", markers: true }) } else { ScrollTrigger.create({ scroller: '.book-window', animation: expand, trigger: ".info-header", start: "top top", toggleActions: "play none none reverse", markers: true }) } } Link to comment Share on other sites More sharing options...
Cassie Posted July 7, 2022 Share Posted July 7, 2022 Hi there! Thanks for the snippet - however it's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? You mention you need to include assets which would be uploaded to a server - this is definitely not necessary. Please don't include your whole project, Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few styles/elements as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Terio Posted July 7, 2022 Author Share Posted July 7, 2022 @Cassie This is what I have so far. It's simplified a lot, but I hope it conveys what I'm trying to do. I've been working on it since adding this post and it almost works. To clarify - the grid div zooms in when one of the columns is scrolled, but comes back to its initial state after checking that both columns are scrolled to the top. There shouldn't be a situation where one column is scrolled down and the div shrinks. Right now, the left column expands and shrinks the div, but the right one doesn't seem to have any effect on it The left column can shrink the div even when the right one is scrolled down which shouldn't be the case. See the Pen rNdeOQM by terramsc (@terramsc) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 Hey there! Did you fix this because this is the behaviour I'm seeing. It only shrinks when both scrollbars are at the top. Quote To clarify - the grid div zooms in when one of the columns is scrolled, but comes back to its initial state after checking that both columns are scrolled to the top. There shouldn't be a situation where one column is scrolled down and the div shrinks. Link to comment Share on other sites More sharing options...
Terio Posted July 8, 2022 Author Share Posted July 8, 2022 Yes I was able to fix it! Sorry for not notifying earlier, I was staying up late to sort this out 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 Nice work! 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