Jump to content
Search Community

ToxicWaste

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by ToxicWaste

  1. 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

×
×
  • Create New...