Web Bae•3y ago

Grid Zoom Help

Hello @Web Bae . I followed your tutorial and it 100% worked. Ended up going back and forth with the clonable Webflow until I understood what was going on. Thanks a lot, it is absolutely what I was looking for.

I'm facing a new issue where I'd like to use it in 4 different sections of my page. I've been able to play around and got this result:
https://www.loom.com/share/82d1c175af2b41d8969adbe9968dba65?sid=a6aa1f64-da31-4565-b2c2-4adccfdfc3b6

As you can see, the animations on the Grid seem to be triggering at the same time, for both the ".final-state" remove and add in every grid. I'm trying to make it so each one of them triggers independently only when the user is in the corresponding section, but I have no idea on how to fix it.

I've read the documentation but since I'm not a developer, I'm really struggling to push it to the final version I'd like to achieve. Do you think you could give me some instructions on how to do this? I'll paste my code in the next message. Thank you very much!!!

Loom

<style>
.grid {
    will-change: grid-column-gap,grid-row-gap,transform;
}

.grid-item {
    will-change: border-radius,transform;
}
</style>

<style>
.grid-2 {
    will-change: grid-column-gap,grid-row-gap,transform;
}

.grid-item-2 {
    will-change: border-radius,transform;
}
</style>

<style>
.grid {
    will-change: grid-column-gap,grid-row-gap,transform;
}

.grid-item {
    will-change: border-radius,transform;
}
</style>

<style>
.grid-2 {
    will-change: grid-column-gap,grid-row-gap,transform;
}

.grid-item-2 {
    will-change: border-radius,transform;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(Flip);

const grid = document.querySelector(".grid");
const gridItems = document.querySelectorAll(".grid-item");
const grid2 = document.querySelector(".grid-2");
const gridItems2 = document.querySelectorAll(".grid-item-2");

// create the final state
gridItems.forEach((item) => item.classList.add("final-state"));
grid.classList.add("final-state");
gridItems2.forEach((item) => item.classList.add("final-state"));
grid2.classList.add("final-state");

// save that final state
const state = Flip.getState([grid, gridItems, grid2, gridItems2], {
  props: "borderRadius"
});

// revert to original state
grid.classList.remove("final-state");
gridItems.forEach((item) => item.classList.remove("final-state"));
grid2.classList.remove("final-state");
gridItems2.forEach((item) => item.classList.remove("final-state"));

// animate with Flip
const tl = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
  }
});

const tl2 = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height2",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
  }
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(Flip);

const grid = document.querySelector(".grid");
const gridItems = document.querySelectorAll(".grid-item");
const grid2 = document.querySelector(".grid-2");
const gridItems2 = document.querySelectorAll(".grid-item-2");

// create the final state
gridItems.forEach((item) => item.classList.add("final-state"));
grid.classList.add("final-state");
gridItems2.forEach((item) => item.classList.add("final-state"));
grid2.classList.add("final-state");

// save that final state
const state = Flip.getState([grid, gridItems, grid2, gridItems2], {
  props: "borderRadius"
});

// revert to original state
grid.classList.remove("final-state");
gridItems.forEach((item) => item.classList.remove("final-state"));
grid2.classList.remove("final-state");
gridItems2.forEach((item) => item.classList.remove("final-state"));

// animate with Flip
const tl = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
  }
});

const tl2 = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height2",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
  }
});
</script>