Hover animation 'slidedown' on the clipped path text-bottom is not working. Can you help me?

The text on the bottom of the logo has a clip-path and maybe because of that i can’t trigger the hover animation. I’ve already changed the called classes of the elements and no effect. The animation is already on the styles and it’s called ‘slidedown’. But when im hovering the logo, the text on the bottom just disappears and it doesnt start the animation. What is incorrect? Thank you.

<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88"> <defs>      <clipPath id="path-1">        <path class="bottom-path" d="M1421.75,395.66H8.58V322H1421.75 z" />      </clipPath>    <clipPath id="path-2">        <path class="cls-x" d="M589,287.24H13V48H589Z"/>      </clipPath>   </defs> <style> @font-face {   font-family: 'Dense Regular';   font-style: normal;   font-weight: normal;   src: local('Dense Regular'), url('Dense-Regular.woff') format('woff'); } .cls-1{fill:#3ee7ad; font-family:Dense;font-size:343px; letter-spacing:0.112em;transform: translate(0,550px);  -webkit-animation: slideup 2s forwards; /* Safari 4+ */   -moz-animation:    slideup 2s forwards; /* Fx 5+ */   -o-animation:      slideup 2s forwards; /* Opera 12+ */   animation:         slideup 2s forwards; animation-delay: 2.3s;/* IE 10+, Fx 29+ */   -webkit-animation-delay: 2.3s; /* Safari 4+ */   -moz-animation-delay:    2.3s; /* Fx 5+ */   -o-animation-delay:      2.3s; /* Opera 12+ */} .cls-2{font-size:343px;font-family:Dense-Thin,Dense;font-weight:200;letter-spacing:0.112em;} .cls-2{stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); opacity: 0; -webkit-animation: stroke 5.5s 1 forwards ease-in-out; /* Safari 4+ */   -moz-animation:    stroke 5.5s 1 forwards ease-in-out; /* Fx 5+ */   -o-animation:      stroke 5.5s 1 forwards ease-in-out; /* Opera 12+ */   animation: stroke 5.5s 1 forwards ease-in-out;animation-delay: 2s;/* IE 10+, Fx 29+ */   -webkit-animation-delay: 2s; /* Safari 4+ */   -moz-animation-delay:    2s; /* Fx 5+ */   -o-animation-delay:      2s; /* Opera 12+ */}  .cls-3{fill:#3ee7ad; font-family:Dense;} .cls-3{font-size:73px; letter-spacing:0.206em;} .cls-4{stroke:#3ee7ad;stroke-dasharray: 1390;   stroke-dashoffset: 1390;stroke-width: 6px; stroke-linecap:butt;   -webkit-animation: dash 8.5s linear forwards; /* Safari 4+ */   -moz-animation:    dash 8.5s linear forwards; /* Fx 5+ */   -o-animation:      dash 8.5s linear forwards; /* Opera 12+ */   animation: dash 8.5s linear forwards;/* IE 10+, Fx 29+ */}    .bottom-path {     transform: scaleX(0);   -webkit-animation: typing 4s steps(38) forwards; /* Safari 4+ */   -moz-animation:    typing 4s steps(38) forwards; /* Fx 5+ */   -o-animation:      typing 4s steps(38) forwards; /* Opera 12+ */   animation: typing 4s steps(38) forwards; animation-delay: 0.5s; /* IE 10+, Fx 29+ */   -webkit-animation-delay: 0.5s; /* Safari 4+ */   -moz-animation-delay:    0.5s; /* Fx 5+ */   -o-animation-delay:      0.5s; /* Opera 12+ */ }  @keyframes stroke {     0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);         stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}     70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }     80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }     100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0);          stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;} }  @-webkit-keyframes stroke {   0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);         stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}     70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }     80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }     100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0);          stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;} } @-moz-keyframes stroke {   0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);         stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}     70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }     80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }     100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0);          stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;} } @-o-keyframes stroke {   0%   {opacity: 1;fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1);         stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}     70%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); }     80%  {fill: rgba(62,231,173,0); stroke: rgba(62,231,173,1); stroke-width: 2; }     100% {opacity: 1;fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0);          stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;} }  @-webkit-keyframes slideup {   0%   {transform: translate(0,450px);}   60%   {transform: translate(0,275px);}    100% {transform: translate(0,287px);} } @-moz-keyframes slideup {   0%   {transform: translate(0,450px);}   60%   {transform: translate(0,275px);}    100% {transform: translate(0,287px);} } @-o-keyframes slideup {   0%   {transform: translate(0,450px);}   60%   {transform: translate(0,275px);}    100% {transform: translate(0,287px);} } @keyframes slideup {   0%   {transform: translate(0,450px);}   60%   {transform: translate(0,275px);}    100% {transform: translate(0,287px);} }   /* The typing effect */  @-webkit-keyframes typing {   0%   {transform: scaleX(0);}   100% {transform: scaleX(1);} } @-moz-keyframes typing {   0%   {transform: scaleX(0);}   100% {transform: scaleX(1);} } @-o-keyframes typing {   0%   {transform: scaleX(0);}   100% {transform: scaleX(1);} } @keyframes typing {   0%   {transform: scaleX(0);}   100% {transform: scaleX(1);} }  @keyframes fade-in {   from { opacity: 0;}   to {opacity: 1;} }  @-webkit-keyframes dash { 0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;}  25% {stroke-dasharray: 1390; stroke-dashoffset: 830;} 40% {stroke-dasharray: 1390; stroke-dashoffset: 830;} 75% {stroke-dasharray: 1390; stroke-dashoffset: 0;}  90% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;} }  @-moz-keyframes dash { 0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;}  25% {stroke-dasharray: 1390; stroke-dashoffset: 830;} 40% {stroke-dasharray: 1390; stroke-dashoffset: 830;} 75% {stroke-dasharray: 1390; stroke-dashoffset: 0;}  90% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;} }  @-o-keyframes dash {   0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;}    25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}   40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}   75% {stroke-dasharray: 1390; stroke-dashoffset: 0;}    90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}   100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;} }  @keyframes dash {   0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;}    25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}   40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}   75% {stroke-dasharray: 1390; stroke-dashoffset: 0;}    90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}   100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;} }  @keyframes dashcont {   0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;}    50% {stroke-dasharray: 1390; stroke-dashoffset: 0;}   100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;} }  @keyframes slidedown {   0%   {transform: translate(13.69px,320px);}    100% {transform: translate(13.69px,385.74px);} }  #palmdesign-logo:hover .cls-x {     animation: typing 1.5s  forwards; animation-delay: 0.5s; /* IE 10+, Fx 29+ */}  #palmdesign-logo:hover .cls-2 {     animation: stroke 7s infinite alternate ease-in-out;     }   #palmdesign-logo:hover #text-bottom text.cls-3{     animation: slidedown 2s; }   </style> <g id="text-palm" clip-path="url(#path-2)"> <text class="cls-1" transform="translate(0 287.26)">PALM</text></g> <text class="cls-2" transform="translate(625 287.26)">DESIGN</text> <g id="text-bottom" clip-path="url(#path-1)"> <text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA </text> </g> <line id="linha" class="cls-4" x1="18" y1="314" x2="1408" y2="314"></line> <rect id="rectangulo" x="18" y="38" width="1390" height="255" fill="transparent"/> </svg> ´´´ 
Add Comment
1 Answer(s)

I’ve changed the value for the transform translate (the y value) since what you have is throwing the text far away.

Also I’ve simplified the code removing those parts that have nothing to do with your question.

@font-face {   font-family: "Dense Regular";   font-style: normal;   font-weight: normal;   src: local("Dense Regular"), url("Dense-Regular.woff") format("woff"); }  .bottom-path {   transform: scaleX(0);   animation: typing 4s steps(38) forwards;   animation-delay: 0.5s; }  @keyframes typing {   0% {     transform: scaleX(0);   }   100% {     transform: scaleX(1);   } }  .cls-3 {   fill: #3ee7ad;   font-family: Dense; } .cls-3 {   font-size: 73px;   letter-spacing: 0.206em;   transform: translate(13.69px, 0px); }  @keyframes slidedown {   0% {     transform: translate(13.69px, 0px);   }   100% {     transform: translate(13.69px, 74px);   } }  #palmdesign-logo:hover #text-bottom text.cls-3 {   animation: slidedown 2s; }  svg {   border: solid; }
<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88"> <defs>      <clipPath id="path-1">        <path class="bottom-path" d="M1421.75,395.66H8.58V322H1421.75 z" />      </clipPath>  </defs>  <g id="text-bottom" clip-path="url(#path-1)"> <text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA </text> </g>  </svg>

Answered on September 1, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.