Myujth

I'm trying to use Snap SVG to do a hover effect for an element. The hover effect is working, however the animation is not working how I would like it to. I would like the new path SVG to slide up, rather than slide in from the left (I think that's what it's doing).

Here's my code:

HTML:

<section class="services">
 <a href="http://gccsi.website.wp.2018.360southclients.net:8080/consultancy/our-services/policy-advice/" data-path-hover="M0,342.1V38.7c253.1-51.4,513.9-51.4,767,0v303.4" class="item">
 <figure>
 <img src="http://gccsi.website.wp.2018.360southclients.net:8080/wp-content/uploads/2018/11/Advocacy_Comms.jpg" alt="Advocacy and Communication" width="737" height="639">
 <svg viewBox="0 0 767 290" preserveAspectRatio="none"><path d="M0,290C0,290,0,0,0,0C126.2,25.4,254.7,38.2,383.5,38.3C512.3,38.2,640.8,25.399999999999977,767,0C767,0,767,290,767,290"></path><desc>Created with Snap</desc><defs></defs></svg>
 </figure>
 </a>
</section>

CSS:

section.services .item
 width:350px;
 margin:0;
 padding:0;
 display:block

 section.services figure
 position:relative;
 overflow:hidden;
 background:#fff;
 border-radius:5px;
 display:block;
 -webkit-box-shadow:0 4px 11px 0 rgba(0,0,0,.16);
 -moz-box-shadow:0 4px 11px 0 rgba(0,0,0,.16);
 box-shadow:0 4px 11px 0 rgba(0,0,0,.16);
 padding-bottom:5em;
 margin:0

 section.services figure img
 position:relative;
 display:block;
 width:100%;
 height:auto

 section.services .item svg
 position:absolute;
 width:calc(100% + 2px);
 bottom:0;
 z-index:10;
 -webkit-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out

 section.services .item:hover svg
 bottom:1em

 section.services .item svg path
 width:100%;
 height:auto;
 fill:#f9f ## this is pink only so I can see what's happening

JavaScript:

(function() {

 function init() 
 var speed = 330,
 easing = mina.backout;

 .slice.call ( document.querySelectorAll( 'section.services .item' ) ).forEach( function( el ) 
 var s = Snap( el.querySelector( 'svg' ) ), 
 path = s.select( 'path' ),
 pathConfig = 
 from : path.attr( 'd' ),
 to : el.getAttribute( 'data-path-hover' )
 ;

 el.addEventListener( 'mouseenter', function() 
 path.animate( 'path' : pathConfig.to , speed, easing );
 );

 el.addEventListener( 'mouseleave', function() 
 path.animate( 'path' : pathConfig.from , speed, easing );
 );
 );
 

I've created a fiddle of what's happening:

https://jsfiddle.net/gw3s7z0p/7/

The code I've got this from can be found here:

https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html

As you can see that one slides up/down nicely with a little bounce. Which is what I'm trying to achieve (just opposite direction) :)

This has to do with the way you are coding your paths. The 2 paths have to be drawn using (if possible) the same number of curves and in the same position. In your example you have 2 curves to draw the "vault" for the starting path and only one for the "goal" path (the one on mouseover)

You may try something like this:

<section class="services">
 <a href="http://gccsi.website.wp.2018.360southclients.net:8080/consultancy/our-services/policy-advice/" data-path-hover="M0.000, 342.100 
C0.000, 240.967 0.000, 139.833 0.000, 38.700 
C253.100, -12.700 513.900, -12.700 767.000, 38.700 
C767.000, 139.833 767.000, 240.967 767.000, 342.100" class="item">
 <figure>
 <img src="http://gccsi.website.wp.2018.360southclients.net:8080/wp-content/uploads/2018/11/Advocacy_Comms.jpg" alt="Advocacy and Communication" width="737" height="639">
 <svg viewBox="0 0 767 290" preserveAspectRatio="none"><path d="M0.000, 342.100 
C0.000, 240.967 0.000, 139.833 0.000, 38.700 
C253.100, 65 513.900, 65 767.000, 38.700 
C767.000, 139.833 767.000, 240.967 767.000, 342.100

"></path><desc>Created with Snap</desc><defs></defs></svg>
 </figure>
 </a>
</section>