使用snap.svg和scrollmagic制作动画形状

我正在尝试创建一个代码，以便在用户滚动时为我的标题制作动画。我设法使用2个不同的插件创建了我想要的动画：snap.svg和scrollmagic。我对这两种都很陌生，所以请原谅我的不高兴。使用snap.svg和scrollmagic制作动画形状

这是CodePen：http://codepen.io/anon/pen/dYbPXe

/* Animation 1 */ 

        var speed = 250, 
        easing = mina.easeinout; 

       [].slice.call (document.querySelectorAll('.header > a')).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); 
        }); 
       }); 


/* Animation 2 */ 
var scrollMagicController = new ScrollMagic(); 
var tween = TweenMax.to('.header-shape > path', 0.5, { 
    fill: 'rgb(255, 39, 46)'  
}); 

var scene = new ScrollScene({ 
    triggerElement: '.background', 
    triggerHook: '0', 
    duration: 400 
}).setTween(tween).addTo(scrollMagicController); 
scene.addIndicators();

现在，如果你滚动页面，的标题的颜色发生变化，如果你悬停头，形状的变化。我想要将形状变化绑定为滚动，以便用户滚动时，形状逐渐变化以及颜色。

这可能是一个简单的（也许是不必要的）事情，但我已经把太多时间放在它里面，这让我很沮丧。感谢您的帮助提前。

编辑：请让我知道如果我的问题不明确，我会尽力澄清。我真的很想要这个效果:(

来源

2015-08-26 Omid

这是我想通了： http://codepen.io/ironoxidey/pen/WrXLwM

这似乎是所有你需要：

var tween = TweenMax.to('.header-shape > path', 0.5, { 
    fill: 'rgb(255, 39, 46)', 
    attr: { d : $('a').attr('data-path-hover') } 
});

（开始你的JS代码行25，动画下2）

来源

2016-01-19 20:42:15 ironoxidey

顺便说一句，我真的很高兴我发现你的问题！今天整天，我一直在试图弄清楚你做的大部分。 – ironoxidey

使用snap.svg和scrollmagic制作动画形状

回答

相关问题