animating multiple clip-path using Gsap in Banner Animation Posted March 5, 2021 Hi, I am trying to animate multiple clip-path using Gsap. I found this while trying to find solutions. It's not quite the solution that I was looking for https://greensock.com/forums/topic/11067-animating-clip-path/ @keyframes glitch-anim-1 { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-clip-path: polygon(0 2%,100% 2%,100% 5%,0 5%); clip-path: polygon(0 2%,100% 2%,100% 5%,0 5%) } 20% { -webkit-clip-path: polygon(0 78%,100% 78%,100% 100%,0 100%); clip-path: polygon(0 78%,100% 78%,100% 100%,0 100%); -webkit-transform: translate(-5px); transform: translate(-5px) } 45% { -webkit-clip-path: polygon(0 63%,100% 63%,100% 80%,0 80%); clip-path: polygon(0 63%,100% 63%,100% 80%,0 80%); -webkit-transform: translate(-5px); transform: translate(-5px) } to { -webkit-clip-path: polygon(0 0,0 0,0 0,0 0); clip-path: polygon(0 0,0 0,0 0,0 0); opacity: 1 } } Is there any way to simulate it in Gsap. Thanks See the Pen MWbBRLM by jeffyabraham (@jeffyabraham) on CodePen
animating multiple clip-path using Gsap
in Banner Animation
Posted
Hi, I am trying to animate multiple clip-path using Gsap.
I found this while trying to find solutions. It's not quite the solution that I was looking for
https://greensock.com/forums/topic/11067-animating-clip-path/
@keyframes glitch-anim-1 {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-clip-path: polygon(0 2%,100% 2%,100% 5%,0 5%);
clip-path: polygon(0 2%,100% 2%,100% 5%,0 5%)
}
20% {
-webkit-clip-path: polygon(0 78%,100% 78%,100% 100%,0 100%);
clip-path: polygon(0 78%,100% 78%,100% 100%,0 100%);
-webkit-transform: translate(-5px);
transform: translate(-5px)
}
45% {
-webkit-clip-path: polygon(0 63%,100% 63%,100% 80%,0 80%);
clip-path: polygon(0 63%,100% 63%,100% 80%,0 80%);
-webkit-transform: translate(-5px);
transform: translate(-5px)
}
to {
-webkit-clip-path: polygon(0 0,0 0,0 0,0 0);
clip-path: polygon(0 0,0 0,0 0,0 0);
opacity: 1
}
}
Is there any way to simulate it in Gsap.
Thanks
See the Pen MWbBRLM by jeffyabraham (@jeffyabraham) on CodePen