Ümit Tunç
30 lines
849 B
JavaScript
30 lines
849 B
JavaScript
// https://codepen.io/GreenSock/pen/RwLepdQ?editors=1010
|
|
|
|
addEventListener("GSAPReady", (event) => {
|
|
const wrapper = document.querySelector("[data-animate='flip']");
|
|
const toggles = [...wrapper.querySelector("[data-flip='toggle']").children];
|
|
const items = wrapper.querySelector("[data-flip='item']");
|
|
|
|
// console.log("flip", wrapper, toggles, items);
|
|
|
|
const flipGridList = () => {
|
|
const state = Flip.getState(items.children);
|
|
items.classList.toggle("list");
|
|
|
|
Flip.from(state, {
|
|
duration: 0.8,
|
|
ease: "expo.out",
|
|
onComplete: () => {
|
|
ScrollTrigger.refresh();
|
|
}
|
|
});
|
|
};
|
|
|
|
toggles.forEach((toggle, index) => {
|
|
toggle.addEventListener("click", () => {
|
|
toggles[0].classList.toggle("current");
|
|
toggles[1].classList.toggle("current");
|
|
flipGridList();
|
|
});
|
|
});
|
|
}); |