Play animation only if two elements are scrolled to the top

[Terio]

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
    })
  }
}

 

[Cassie]

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. 

[Terio]

@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

[Cassie]

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.

 

 

[Terio]

Yes I was able to fix it! Sorry for not notifying earlier, I was staying up late to sort this out

[Cassie]

Nice work!