Есть ли способ позволить пользователю прокручиваться до определенной точки, элемент затухает, после чего воспроизводится анимация (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'}})
])
Это действительно слишком сложно.
Мой мыслительный процесс на этом у вас есть булавка, которая делает вашу первоначальную анимацию.
onComplete этой анимации вы непосредственно добавляете анимацию, которую хотите сделать?
Вы можете вложить еще одну временную шкалу внутри метода onComplete, чтобы вы могли упорядочить эти анимации, не имея такой огромной вложенной группы анимации JQuery.
Я также настоятельно рекомендую не смешивать анимацию зеленого и jQuery вместе, они вызвали кошмар для меня.