Superscrollorama, TweenMax Включите анимацию и после этого возобновите прокрутку

Question

Superscrollorama, TweenMax Включите анимацию и после этого возобновите прокрутку

0

Есть ли способ позволить пользователю прокручиваться до определенной точки, элемент затухает, после чего воспроизводится анимация (X2) (без ввода пользователя), и после этого прокрутка запускает дальнейшие анимации, но они могут запускаться только в том случае, если анимация (X2).

var controller = $.superscrollorama({
            triggerAtCenter: false
        });
            // set duration, in pixels scrolled, for pinned element
                var pinDur = 2800;

                // create animation timeline for pinned element
                var pinAnimations = new TimelineLite();
                pinAnimations
                    .append([
                        TweenMax.to($('#mouse_walk'), 5, {css:{opacity: 1},
                            onComplete: function(){
                                $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){
                                    $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                        $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){
                                            $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                setTimeout(function() {
                                                      $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){
                                                          $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                              $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){
                                                                  $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                                    })
                                                                })
                                                            })
                                                        })
                                                    }, 800);
                                                    })
                                                })
                                            })
                                        });
                                    }
                                }
                            )
                        ])
                    .append([
                        TweenMax.to( $('#mouse_walk_hell'), 5, {css:{opacity: '1'}})
                    ])

LexLusa 24 сен. 2013, в 17:55

Источник

Теги:

jquery

tweenmax

1 ответ

Ещё вопросы

James · Answer 1 · 2013-10-15T15-10-00.000Z

Это действительно слишком сложно.

Мой мыслительный процесс на этом у вас есть булавка, которая делает вашу первоначальную анимацию.

onComplete этой анимации вы непосредственно добавляете анимацию, которую хотите сделать?

Вы можете вложить еще одну временную шкалу внутри метода onComplete, чтобы вы могли упорядочить эти анимации, не имея такой огромной вложенной группы анимации JQuery.

Я также настоятельно рекомендую не смешивать анимацию зеленого и jQuery вместе, они вызвали кошмар для меня.