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