how to manipulate timeline/section/scrolltrigger

[artstyle]

im sorry guys maybe i dont understand something but ive read the documentation and i still dont understand how to manipulate with the element during the timeline at each exact point.

i draw a scheme of what i want to see. i hope you understand the question. thanks for help

http://4r7.ru/scroll/nnm.jpg

 

example:
settings: scrolltrigger(scrub,pin)

i have a section, let it be 4900px and i have a multiple images which must be animated at exact position on scroll.

i want to:
1. scroll first 1000px with empty space

2.the image with bike appears from the bottom

3. at 1900px the image with bike pins to next 2900px then immediately dissapears

4. from 2900px to 3900px many images with lamps flying from bottom to top on scroll and dissapears

5. at 3900px the bike immedeatly appears and pins to the end of the section. the text slowly appears one by one on scroll

should i "pin" the section during scrolltrigger. i dont really understand how to "pin" something only where i need it to pin(example from 1000px to 2000px)

[ZachSaucier]

Hey artstyle. It sounds like you are wanting to use exact pixel values for your ScrollTrigger start and end values. So just pass in those values. For example:

ScrollTrigger.create({
  animation: anim,
  scrub: true,
  
  // not sure if you want this part
  pin: someElem,
  
  start: 1900,
  end: 2900
});

Does that make sense?

 

If you provide a minimal demo of what issues you're running into we'll be happy to help however we can.

[artstyle]

its glitching... i dont know why... sometimes the bike just dissapears...

http://4r7.ru/HLP/index.html

 script for the bike is^
 

        gsap.to('.s6-bike-bgr',{
            scrollTrigger: {
                trigger: ".s6-bike-bgr",
                start: "center center",
                end: "bottom center",
                pin: true,
                markers: true,
            }
        });

i think the problem is here