Animating shape using snap.svg and scrollmagic

问题

I am trying to create a code to animate my header as the user scrolls. I have managed to create the animations I want using 2 different plugins: snap.svg and scrollmagic. I'm new to both of these so please excuse my noobiness.

Here it is on 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();

Right now, if you scroll the page, the color of the header changes, and if you hover the header, the shape changes. I want to bind the shape change to scroll, so as users scroll, the shape gradually changes as well as the color.

This might be a simple (maybe unnecessary) thing but I've put wayy too much time into it and it's frustrating me. Thanks for your help in advance.

EDIT: Please let me know if my question is not clear and I will try to clarify. I really want this effect :(

回答1:

Here's what I figured out: http://codepen.io/ironoxidey/pen/WrXLwM

This seems to be all you need:

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

(started on line 25 of your JS code, under Animation 2)

来源：https://stackoverflow.com/questions/32234007/animating-shape-using-snap-svg-and-scrollmagic

标签

jquery

svg

tween

snap.svg

scrollmagic