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
Grid Zoom Help
5 Replies
Inside <head> tag
<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>
Before </body> tag
<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>This is how I've named my layers. Thank you very much
After a few more hours trying things out, I was able to achieve the result I was looking for by creating different states and different timelines. Not sure if this is a good practice, but I'll leave it here, maybe it will help someone in the future 🙂 again thanks for the tutorial @Web Bae
Hey @gabriel.morais I’m in travel but glad you got it figured out! I think you’ll be fine with the separate states and timeline.
Tyvm! I tried pasting my solution here for future users but sadly it goes beyond the character limit