Hi I'm new to GSAP and I'm working on scrollTrigger animation plugin but I have some issues may you please help me ? Thanks in advance
the section of hand
first : didn't work until I create new timeline I don't know why
second : it's animate only one time and some time I reach the section and everything is appear
my third question is how to make the ainmation repaet each time I enterback again
//gsap.registerPlugin(MotionPathPlugin);
jQuery(document).ready(function($){
const random = (min, max) => {
return Math.floor(Math.random()*(max-min) + min);
}
const makeVisible = (target) => {
var tl = new gsap.timeline();
tl.to(target, {
visibility: 'visible'
});
return tl;
}
const displayBody = () => {
var tl = new gsap.timeline();
tl.to('.minion', {
visibility: 'hidden'
});
tl.fromTo('#center-rock', {
visibility: 'visible',
<!-- x: random(-300, 300), -->
<!-- y: random(-100, 0), -->
scale: 0.3,
<!-- rotateZ: random(0, 360), -->
}, {
<!-- rotateZ: 0, -->
<!-- x: 0, -->
<!-- y: 0, -->
scale: 1,
duration: 0.6,
ease: 'bounce'
}, '0');
return tl;
}
const displayRocks = (target, to) => {
var tl = makeVisible(target);
tl.fromTo(target, {
opacity: 0,
scale: 0.3,
}, {
opacity: 1,
scale: 1,
ease: 'bounce.in',
duration: 0.3,
}, '0');
return tl;
}
const displayDarkShadow = () => {
var tl = makeVisible('#dark-shadow')
tl.fromTo('#dark-shadow', {
opacity: 1
}, {
opacity: 0.4,
repeat: 1,
yoyo: true,
duration: 0.5
}, '0');
return tl;
}
const jump = () => {
return gsap.to('.rocks', {
transformOrigin: 'center',
y: -50,
yoyo: true,
repeat: 1,
ease: 'bounce.out'
})
}
const displayClouds = (target) => {
var tl = makeVisible(target);
var tl = makeVisible(target);
tl.fromTo(target, {
opacity: 0,
scale: 0.2,
}, {
opacity: 1,
scale: 1,
duration: 0.5
}, '0');
return tl;
}
const displayLights = (target) => {
var tl = makeVisible(target);
tl.fromTo(target, {
opacity: 0,
height: 0,
}, {
opacity: 1,
height: '100%',
duration: 0.5
}, '0');
return tl;
}
const displayPapers = () => {
const ids = ["#p1", "#92", "#p3", "#p4", "#p5", "#p6", "#p7", "#p8", "#p9"];
ids.forEach((id,index) => {
console.log("#paper"+(index+1),'"#paper"+(i+1)');
gsap.from("#paper"+(index+1), {
opacity:0,
visibility:0,
duration: gsap.utils.random(1.5, 2.3),
yoyo: true,
ease: "power1.inOut",
motionPath:{
path: "#p"+(index+1),
align: "#p"+(index+1),
// autoRotate: true,
alignOrigin: [0.5, 0.5]
},
delay:3,
onComplete: function() {
document.body.classList.add('float-papers');
}
});
});
}
const displayLamp = () => {
var tl = new gsap.timeline();
tl.fromTo('#lamp-group', {
visibility: 'visible',
x: random(-300, 300),
y: random(-100, 0),
scale: 0.3,
rotateZ: random(0, 360),
}, {
rotateZ: 0,
x: 0,
y: 0,
scale: 1,
duration: 0.6,
ease: 'bounce'
}, '0');
return tl;
}
const dispalyMountain = (target, to) => {
var tl = makeVisible(target);
tl.fromTo(target, {
opacity: 0,
scale: 0.3,
}, {
opacity: 1,
scale: 1,
ease: 'bounce.in',
duration: 0.3,
}, '0');
return tl;
}
const dispalyLampClouds = (target) => {
var tl = makeVisible(target);
tl.fromTo(target, {
opacity: 0,
scale: 0.2,
}, {
opacity: 1,
scale: 1,
duration: 0.5
}, '0');
return tl;
}
const displayLightAnimation = () => {
var tl = new gsap.timeline();
tl.fromTo('#blur2',
{
scale: 0.8,
repeat:-1,
}, {
scale: 1,
duration: 2,
ease: 'Power1.easeInOut',
yoyo:true,
repeat:-1,
}, '0');
return tl;
}
const displayCloudAnimation = (target,y) => {
var tl = new gsap.timeline();
tl.from(target,{
y: "+="+y,
ease: 'Power1.easeInOut',
repeat:-1,
yoyo:true,
duration:1.5,
});
return tl;
}
const displayHand = () => {
var tl = new gsap.timeline();
tl.to('#hand-group', {
visibility: 'hidden'
});
tl.fromTo('#hand-group', {
visibility: 'visible',
rotate:-100,
x:'-100%'
},
{
x:0,
rotate:0,
yoyo:true,
duration:1.5
});
return tl;
}
const displayOctopusHand = () => {
var tl = new gsap.timeline();
tl.to('#octpus-group', {
visibility: 'hidden'
});
tl.fromTo('#octpus-group', {
visibility: 'visible',
rotate:100,
x:'100%'
},
{
x:0,
rotate:0,
yoyo:true,
duration:1.5
});
return tl;
}
const displayHandFlower = () => {
var tl = new gsap.timeline();
tl.fromTo('.hand-flower img', {
opacity:0,
y:-100
},
{
yoyo:true,
opacity:1,
y:0
}).to("#turbulence",{
attr: { baseFrequency: '0 0' }
});
return tl;
}
let sections = gsap.utils.toArray(".animate-section"),
currentSection = sections[0];
//gsap.set("body", {height: (sections.length * 100) + "%"});
// create a ScrollTrigger for each section
sections.forEach((section, i) => {
ScrollTrigger.create({
start: () => (i - 0.5) * innerHeight -200,
end: () => (i + 0.5) * innerHeight + 200,
//start: 'top+=100 top',
//end: 'bottom+=100 bottom',
scrub:1,
// onToggle: self => self.isActive && setSection(section),
markers:true
});
});
var master = new gsap.timeline();
master.add(displayBody(), 'checkpoint-1')
master.add(displayRocks('#left-rock'));
master.add(displayRocks('#right-rock'));
master.add('checkpoint-3');
master.add(jump()).add(displayDarkShadow(), 'checkpoint-3');
master.add(displayClouds('#left-cloud'), 'checkpoint-3+=1').add(displayClouds('#right-cloud'), 'checkpoint-3+=1.3');
master.add(displayLights('#left-light'),'checkpoint-3+=0.8')
.add(displayLights('#tiny-light'), 'checkpoint-3+=0.8')
.add(displayLights('#center-shadow'), 'checkpoint-4+=0.8')
.add(displayPapers(), 'checkpoint-4+=50');
master.add(displayLamp(), 'checkpoint-5')
master.add(dispalyMountain('#left-mountain'));
master.add(dispalyMountain('#right-mountain'));
master.add('checkpoint-6');
master.add(dispalyLampClouds('#cloud-left'), 'checkpoint-6+=0.5')
.add(dispalyLampClouds('#cloud-right'), 'checkpoint-6+=0.5');
master.add('checkpoint-7');
master.add(displayLightAnimation(), 'checkpoint-7')
.add(displayCloudAnimation('#cloud-left',10), 'checkpoint-7+=0.1')
.add(displayCloudAnimation('#cloud-right',15), 'checkpoint-7+=0.2');
var masterHands = new gsap.timeline({
ScrollTrigger:{
start: () => (i - 0.5) * innerHeight -200,
end: () => (i + 0.5) * innerHeight + 200,
scrub:1,
markers:true
}
});
masterHands.add('checkpoint-8');
masterHands.add(displayOctopusHand(), 'checkpoint-8')
.add(displayHand(),'checkpoint-8+=1.3')
.add(displayHandFlower(),'checkpoint-8+=3');
//Lilac path :
jQuery('#lilac-path').height(document.body.clientHeight - 200);
//jQuery('#path-svg').height(document.body.clientHeight - 200);
// The start and end positions in terms of the page scroll
const offsetFromTop = innerHeight;
const pathBB = document.querySelector("#path").getBoundingClientRect();
const startY = pathBB.top - innerHeight + offsetFromTop;
const finishDistance = startY + pathBB.height - offsetFromTop;
//console.log('pathBB.top:'+pathBB.top,'innerHeight:'+innerHeight,'offsetFromTop:'+offsetFromTop);
//console.log('finishDistance:'+finishDistance);
// the animation to use
var tween = gsap.to("#lily",{
scrollTrigger: {
trigger: "#path",
scrub: true,
start: "top+=40 center",
end: "bottom center"
},
duration: 90,
//paused: true,
ease: "none",
motionPath: {
path: "#path",
align: "#path",
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
});
});
