ScrollTrigger animation

[rala]

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]
  }    

});

    
    
    
    
    
});

See the Pen wvqQWgQ by roleno (@roleno) on CodePen

[OSUblake]

Hi rala,

 

There's over 1000 lines of code in that demo. Can you please reduce it to a minimal demo that only shows the issue at hand. You don't need to include everything from your project, just a small snippet of code and css that clearly shows the issue.

[GreenSock]

Like @OSUblake said, there's way too much code to weed through (please provide a minimal demo), but I did notice a couple of things from a very quick glance:

 

BAD:

var masterHands = new gsap.timeline({
    ScrollTrigger:{...})

GOOD:

var masterHands = gsap.timeline({
    scrollTrigger:{...});

(Don't put "new" in front of gsap.timeline() and the "s" in "scrollTrigger" should be lowercase)

 

This was also a problem:

tl.fromTo('#blur2', {
  scale: 0.8,
  repeat:-1,
}, {...}, '0');

You're setting an infinite repeat in the "from" part of the tween, but that belongs in the "to" part: 

tl.fromTo('#blur2', {
  scale: 0.8,
}, {repeat: -1, ...}, 0);

 

A few other minor things:

1. You're using '0' (a string) as a position parameter which will get interpreted as a label since it's a string, but I assume you meant 0 (a number) as a absolute time.
2. I noticed you're doing .to(... {visibility: "visible"}) in a few places which creates a 0.5-second tween but "visibility" is not animatable, so it'll just take 0.5 seconds and then set that property to that new value. I'm just not sure why you're trying to tween it. Nothing would really break because of that - it just struck me as a little odd. 
3. If you're trying to use a percentage-based x or y, you should almost always use xPercent/yPercent. In other words...

   // not as good
   x:'100%'
   
   // better
   xPercent: 100

4. Did you know GSAP has a built-in gsap.utils.random() method? You don't need to create your own.
    

If you still need help, please provide a minimal demo with a very specific GSAP-related question and we'd be happy to take a look.