// Grid Button
document.querySelector("#grid").addEventListener("click", function (event) {
event.preventDefault(); // Verhindert das Springen der Seite
const state = Flip.getState(".container, section");
const container = document.querySelector(".container");
container.classList.remove("rows", "columns");
container.classList.add("grid");
Flip.from(state, {
duration: 0.5,
stagger: 0.1,
ease: "power1.inOut",
});
});
// Columns Button
document.querySelector("#columns").addEventListener("click", function (event) {
event.preventDefault(); // Verhindert das Springen der Seite
const state = Flip.getState(".container, section");
const container = document.querySelector(".container");
container.classList.remove("rows", "grid");
container.classList.add("columns");
Flip.from(state, {
duration: 0.5,
stagger: 0.1,
ease: "power1.inOut",
});
});
// Rows Button
document.querySelector("#rows").addEventListener("click", function (event) {
event.preventDefault(); // Verhindert das Springen der Seite
const state = Flip.getState(".container, section");
const container = document.querySelector(".container");
container.classList.remove("grid", "columns");
container.classList.add("rows");
Flip.from(state, {
duration: 0.5,
stagger: 0.1,
ease: "power1.inOut",
});
});
ONE
two
three
four
five
six
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Discover
Scroll
selected work
Discover
Scroll