// init controller
if (document.body.clientWidth >= 1200) {
function ScrollLottie(vars) {
let playhead = {frame: 0},
target = gsap.utils.toArray(vars.target)[0],
speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1},
animation = lottie.loadAnimation({
container: target,
renderer: vars.renderer || "svg",
loop: false,
autoplay: false,
path: vars.path,
animationData: vars.animationData
});
for (let p in vars) { // let users override the ScrollTrigger defaults
st[p] = vars[p];
}
animation.addEventListener("DOMLoaded", function() {
gsap.to(playhead, {
frame: animation.totalFrames - 1,
ease: "none",
onUpdate: () => animation.goToAndStop(playhead.frame, true),
scrollTrigger: st
});
// in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
ScrollTrigger.sort();
ScrollTrigger.refresh();
});
return animation;
}
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
scrub: .1,
pin: true,
markers: {startColor: "white", endColor: "white", fontSize: "18px", indent: 10}
});
gsap.set('.jsScn4', {width:400, height:400});
gsap.set('.jsHide', { autoAlpha: 0 });
const tl = gsap.timeline()
.to('#jsScn1', 1, {top:'-100vh', left: '-100px', ease:Power1.easeInOut})
.to('#jsScn2', 1, {top:'-100vh', right: '-100px', ease:Power1.easeInOut}, '-=.85')
.to('#jsScn3', 1, {top:'-100vh', right: '-100px', ease:Power1.easeInOut}, '-=.85')
.fromTo('#jsScn11', 1, {top:'100vh'}, {top:'0', ease: Power1.easeInOut}, '-=2')
.fromTo('#jsScn12', 1, {top:'100vh'}, {top:'0', ease: Power1.easeInOut})
.to('#jsScn4', 1, {width:'900vh', height:'900vh', ease:Power1.easeInOut}, '-=.85')
const scroll = ScrollTrigger.create({
trigger: "#jsScene",
start: "top top",
end: "+=100%",
pinSpacing: false,
animation: tl,
onEnter: () => {
// document.getElementById('jsScene1').style.background = 'rgba(0,0,0,0)'
// document.getElementById('jsScene2').style.background = 'rgba(0,0,0,0)'
}
});
const tl1 = gsap.timeline({})
.fromTo('#jsScn11', 3, {top:'0'}, {top:'-100vh', ease:Power1.easeInOut}, '+=3')
.fromTo('#jsScn12', 3, {top:'0'}, {top:'-100vh', ease:Power1.easeInOut}, '-=2.85')
.fromTo('#jsScene1', 3, {background:'rgba(0,0,0,0)'}, {background:'rgba(255, 229, 0, 1)', ease:Power1.easeInOut}, '-=2.85')
.to('#jsScn5', 3, {left:'60vh', top:'0', zoom: '0.1', autoAlpha: 0, ease:Power1.easeInOut}, '-=2.85')
.to('#jsScn21', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=2.85')
.to('#jsScn22', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=1.85')
.to('#jsScn23', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=1.85')
const scroll1 = ScrollTrigger.create({
trigger: "#jsScene1",
start: "top top",
end: "+=500%",
onLeave: () => {
// document.getElementById('#jsScn5').style.position = 'fixed'
},
// pinType: "transform",
markers: {startColor: "red", endColor: "red", indent: 200},
animation: tl1
});
const tl2 = gsap.timeline({})
const scroll2 = ScrollTrigger.create({
trigger: "#jsScene2",
// start: "top top",
start: "-=200%",
end: "+=500%",
markers: {startColor: "green", endColor: "green", indent: 400},
animation: tl2
});
ScrollLottie({
target: '#jsScn5',
// path: 'img/bodymovin-logo.json',
animationData: {"v":"4.8.0","meta":{"g":"LottieFiles AE ","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":62.0000025253118,"w":558,"h":761,"nm":"Предварительная композиция 6","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Слой-фигура 12","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[278.829,380.507,0],"ix":2},"a":{"a":0,"k":[31.25,17.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[693,693,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":47,"s":[981,981,100]},{"t":63.0000025660426,"s":[693,693,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-19.75],[10.25,21.75],[29.25,22.5],[5.75,54.5],[53.5,12.5],[34.5,11.75]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.898039215686,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Фигура 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":27.0000010997325,"op":62.0000025253118,"st":-41.0000016699642,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Слой-фигура 11","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[278.897,380.504,0],"ix":2},"a":{"a":0,"k":[31.25,17.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":17,"s":[693,693,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":40,"s":[981,981,100]},{"t":56.0000022809268,"s":[693,693,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-19.75],[10.25,21.75],[29.25,22.5],[5.75,54.5],[53.5,12.5],[34.5,11.75]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.898039215686,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Фигура 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":11.0000004480392,"op":62.0000025253118,"st":-57.0000023216576,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Слой-фигура 10","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[278.906,380.504,0],"ix":2},"a":{"a":0,"k":[31.25,17.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[693,693,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":35,"s":[981,981,100]},{"t":51.0000020772726,"s":[693,693,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-19.75],[10.25,21.75],[29.25,22.5],[5.75,54.5],[53.5,12.5],[34.5,11.75]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.898039215686,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Фигура 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":8.00000032584668,"op":61.0000024845809,"st":-60.0000024438501,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Слой-фигура 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[278.915,380.504,0],"ix":2},"a":{"a":0,"k":[31.25,17.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[693,693,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":27,"s":[981,981,100]},{"t":43.0000017514259,"s":[693,693,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-19.75],[10.25,21.75],[29.25,22.5],[5.75,54.5],[53.5,12.5],[34.5,11.75]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.898039215686,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Фигура 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4.00000016292334,"op":57.0000023216576,"st":-64.0000026067734,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Слой-фигура 7","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":64,"s":[100]},{"t":87.0000035435826,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[279,380.5,0],"ix":2},"a":{"a":0,"k":[31.25,17.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-69,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":-53,"s":[693,693,100]},{"i":{"x":[0.008,0.008,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":70,"s":[693,693,100]},{"t":86.0000035028518,"s":[226,226,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-19.75],[10.25,21.75],[29.25,22.5],[5.75,54.5],[53.5,12.5],[34.5,11.75]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.898039275525,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Фигура 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":62.0000025253118,"st":-76.0000030955435,"bm":0}],"markers":[]},
duration: .5,
start: () => { // "100%-250px ",
const height = window.innerHeight;
const chartHeight = document.querySelector('#jsScn5').offsetHeight;
return `${chartHeight + (height - chartHeight) / 2}px top`;
},
pin: true,
pinType: 'transform',
end: "+=300%",
markers: {startColor: "#e900ff", endColor: "red", indent: 200},
speed: 'fast'
})
}
!
