Web Analytics Made Easy -
StatCounter Morphing paths with KUTE (KUTE.js and SVG plugin) - CodingForum

Announcement

Collapse
No announcement yet.

Morphing paths with KUTE (KUTE.js and SVG plugin)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Morphing paths with KUTE (KUTE.js and SVG plugin)

    Hi all, hoping someone might be able to help and see where I am going wrong. I am reasonably new to Javascript and this is a personal set project.

    The project uses KUTE and the KUTE SVG plugin.

    There is a set of 6 polygons (SVG paths), and a set of 6 hidden target polygons. 3 of the polygons work correctly (5, 4, 1) and 3 polygons that are animating incorrectly (1 point is expanding to an incorrect location).

    So far I have;

    - adjusted the morphIndex
    - confirmed the points are in the correct order (comparison) between the two paths
    - changed the lineto of polygon2 and 2a to the same absolute point (to make it simpler)
    - searched for other people's experiences with SVG path morphing
    - checked there is no console issues arising

    Below is the relevant code I am trying to troubleshoot, however a functional sample of my project posted to codepen;
    https://codepen.io/KANGOORA/pen/WGQJjN

    Code:
    [B]HTML[/B]
    
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" class="polymenu" id="btnbox">
    <!-- First set of polygons -->
    	<path id="polygon6" class="shard5" d="M235.3,104.7L356.7-94.7l128.6,400.4z"/>
    	<path id="polygon5" class="shard10" d="M235.3,104.7L534.6-61.9l-49.3,367.6z"/>
    	<path id="polygon4" class="shard10" d="M235.3,104.7l-99.2,703.4l239.1-209.6z"/>
    	<path id="polygon3" class="shard5" d="M485.3,305.7L136.1,808.1l239.1-209.6z"/>
    	<path id="polygon2" class="shard5" d="M375.3,598.5L136.1,808.1L505.6,1136.6z"/>
    	<path id="polygon1" class="shard10" d="M375.3,598.5l-156.2,563.6l-83-354z"/>		
    <!-- Second set of polygons -->
    	<path id="polygon6a" style="visibility:hidden;" class="shard10" d="M220.3,120.7l121.4-249.4l88.6,420.4z"/>
    	<path id="polygon5a" style="visibility:hidden;" class="shard10" d="M220.3,120.7l279.3-236.6l-69.3,407.6z"/>
    	<path id="polygon4a" style="visibility:hidden;" class="shard10" d="M220.3,120.7l-19.2,703.4l149.1-159.6z"/>
    	<path id="polygon3a" style="visibility:hidden;" class="shard10" d="M430.3,291.7L201.1,824.1l149.1-159.6z"/>
    	<path id="polygon2a" style="visibility:hidden;" class="shard10" d="M350.3,664.5L201.1,824.1L505.6,1136.6z"/>
    	<path id="polygon1a" style="visibility:hidden;" class="shard10" d="M350.3,664.5l-156.2,493.6l7-334z"/>
    </svg>
    
    [B]Javascript[/B]
    
    var tween;
    
    tween = KUTE.fromTo('#polygon6', {path: '#polygon6' }, { path: '#polygon6a' },{morphIndex:2, morphPrecision:4, duration: 5000, yoyo: true, repeat: 10, showMorphInfo: true}).start();
    tween = KUTE.fromTo('#polygon5', {path: '#polygon5' }, { path: '#polygon5a' },{morphIndex:2, duration: 5000, yoyo: true, repeat: 10}).start();
    tween = KUTE.fromTo('#polygon4', {path: '#polygon4' }, { path: '#polygon4a' },{morphIndex:2, morphPrecision:1, duration: 5000, yoyo: true, repeat: 10}).start();
    tween = KUTE.fromTo('#polygon3', {path: '#polygon3' }, { path: '#polygon3a' },{morphIndex:2, morphPrecision:4, duration: 5000, yoyo: true, repeat: 10, showMorphInfo: true}).start();
    tween = KUTE.fromTo('#polygon2', {path: '#polygon2' }, { path: '#polygon2a' },{morphIndex:2,duration: 5000, yoyo: true, repeat: 10, showMorphInfo: true}).start();
    tween = KUTE.fromTo('#polygon1', {path: '#polygon1' }, { path: '#polygon1a' },{morphIndex:2, morphPrecision:4, duration: 5000, yoyo: true, repeat: 10}).start();
    
    };
    Hoping someone might be able to point me in the right direction. Even if it is a nudge in the right direction.

  • #2
    This problem was solved by updating to a new version of KUTE.

    Comment

    Working...
    X