gabriel.morais
WBWeb Bae
•Created by gabriel.morais on 10/17/2023 in #❓︱questions
Grid Zoom Help
Tyvm! I tried pasting my solution here for future users but sadly it goes beyond the character limit
7 replies
WBWeb Bae
•Created by gabriel.morais on 10/17/2023 in #❓︱questions
Grid Zoom Help
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
7 replies
WBWeb Bae
•Created by gabriel.morais on 10/17/2023 in #❓︱questions
Grid Zoom Help
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>7 replies
WBWeb Bae
•Created by gabriel.morais on 10/17/2023 in #❓︱questions
Grid Zoom Help
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>7 replies