Hey @Rodrigo!
Thank you very much again for your help - now I figured it out how to hide or show the elements on scroll with Flip & ScrollTrigger!
but I just can't seem to figure out how to animate those with ease & maybe even a scale animation.
Would you mind helping me out one more time?
Here is the CSS - I just changed a bits and pieces from your provided example....
.big-star.active {
visibility: hidden;
}
.little-star {
visibility: hidden;
}
.little-star.active {
visibility: visible;
}
.big-star, .big-star.flipping {
visibility: visible;
}
....the same goes for the JS code!
gsap.registerPlugin(Flip);
const bigStar = document.querySelector(".big-star"),
littleStar = document.querySelector(".little-star");
const doFlip = () => {
const state = Flip.getState(".little-star, .big-star");
bigStar.classList.toggle("active");
littleStar.classList.toggle("active");
Flip.from(state, {
duration: 0.3,
fade: true,
absolute: true,
toggleClass: "flipping",
ease: "power1.inOut"
});
};
ScrollTrigger.create({
trigger: "#flip-maybe",
start: "top 30%",
end: "top 40%",
markers: true,
onEnter: doFlip,
onEnterBack: doFlip,
});
I'm sorry I can't really provide a minimal demo as this would certainly help in debugging
Here is the link again for the live site if you need it!
thanks again for the help and wish you and the Greensock team an awesome evening/day!