GSAP 自定义起点的列表（导航菜单）摇晃动画

GSAP Custom Stagger Start Point 默认GSAP支持从头到尾或者相反方向的摇晃列表，但我们可以使用cycle和delay方法来实现自定义的摇晃起点。参考阅读： http://tympanus.net/Blueprints/MultiLevelMenu/

教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2260
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {

// On an list item click...
    jQuery('li').on('click', function() {
        // Get the clicked item index so we can compare later
        var clickIndex = jQuery(this).index();
        // Set up a new timeline
        // We should be able to do this with a simple TweenMax soon, but it appears to be broken still in 1.18.0 release.
        // According to this: http://greensock.com/forums/topic/12512-does-delay-work-with-cycle/ it should be fixed in the next version. Sweet!
        var tl = new TimelineMax();

// Our stagger animation
        tl.staggerTo('li', 0.3, {
            opacity: 0,
            x: -100,
            // Where the magic happens...
            cycle: {
                // For each animated element index, calculate our delay
                // Does the work of a for loop for us so we don't have to! Nice.
                // Learn more about cycle: http://greensock.com/gsap-1-18-0
                delay: function(i) {
                    // The 0.1 simply modifies the delay to not be a full second. That allows it to look more like a normal stagger.
                    // The real meat is the part before the 0.1. It calculates the difference in index.
                    return parseInt(Math.abs(clickIndex - i)) * 0.1;
                }
            },
            // Just a little easing to help out
            ease: Back.easeIn.config(1)
        }, 0); // Our stagger delay is 0, so all elements start at the same spot, which we then override above.
    });

// Reset button
    jQuery('button').on('click', function() {
        TweenMax.set('li', {
            opacity: 1,
            x: 0
        });
    });

})();

编译

CSS

HTML

GSAP Custom Stagger Start Point 默认GSAP支持从头到尾或者相反方向的摇晃列表，但我们可以使用cycle和delay方法来实现自定义的摇晃起点。参考阅读： http://tympanus.net/Blueprints/MultiLevelMenu/

教程

编辑器支持Emmet

快捷键

GSAP Custom Stagger Start Point 默认GSAP支持从头到尾或者相反方向的摇晃列表，但我们可以使用cycle和delay方法来实现自定义的摇晃起点。 参考阅读： http://tympanus.net/Blueprints/MultiLevelMenu/

教程

分别使用CSS3 transform、SVG animate和GSAP实现的搜索图标动画

使用jQuery.dropdown.js插件实现超酷的自定义下拉列表框动效 - 散落的选项卡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

GSAP Custom Stagger Start Point 默认GSAP支持从头到尾或者相反方向的摇晃列表，但我们可以使用cycle和delay方法来实现自定义的摇晃起点。参考阅读： http://tympanus.net/Blueprints/MultiLevelMenu/