Изо всех сил пытается получить несколько SVG для анимации при прокрутке.Я следовал за CodePen, и первая анимация работает нормально, а вторая - нет.Я должен быть в состоянии запустить как 4-5 из них на главной странице.
var scrollMorph1 = new TimelineLite({paused:true})
.to("#headerBottomMask",1, {morphSVG:"#headerBottomMask2"},0)
.to("#headerBottom01a",1, {morphSVG:"#headerBottom01b"},0)
.to("#headerBottom02a",1, {morphSVG:"#headerBottom02b"},0)
.to("#headerBottom03a",1, {morphSVG:"#headerBottom03b"},0)
.to("#headerBottom04a",1, {morphSVG:"#headerBottom04b"},0)
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var diff = 50;
var object1 = $('#header h1');
var topOfRange1 = object1.offset().top + diff;
if (scrolled > topOfRange1 ) {
scrollMorph1.play().timeScale(1);
} else {scrollMorph1.reverse().timeScale(1);}
});
var scrollMorph2 = new TimelineLite({paused:true})
.to("#clientsMask",1, {morphSVG:"#clientsMask2"},0)
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var diff = 50;
var object2 = $('#weare a');
var topOfRange2 = object2.offset().top + diff;
if (scrolled > topOfRange2 ) {
scrollMorph2.play().timeScale(1);
} else {scrollMorph2.reverse().timeScale(1);}
});