ScrollTrigger - one content in two scroll

[amino]

hey

I have problem when i try to use one content in two scrolls

i have two sections

first one contain <h1> and <p> and the second one contain <img> and <p>

so what i want is the scroll to be in three steps 

the first step:  reveal the <h1> than the <p> of the first section (this step work fine )

the second step:  hide the <h1> and the <p> place at the top than reveal the image 

the third step:  hide the <p> and the <img> place at the top than reveal the <p> of the second section 

See the Pen ZEejMmq by bma_dev (@bma_dev) on CodePen

[Cassie]

It doesn't look like you have a problem. Your codepen is doing exactly what you're telling it to do - and that isn't what you've outlined in the text.

what you're saying in the code - 'hey GreenSock, when these sections come into view move these two elements up'. 

-----

If you want sections to be hidden, you'll need to add opacity tweens

 

.to(".step-1-2", {opacity: 0})

 

and if you want to (place?) things at the top you may need pinning?
 

let tl2 = gsap.timeline({
    scrollTrigger: {
      trigger: ".sec-2",
      pin: true,   // pin the trigger element while active
      pin: '.elem' // pin a specific element while active
    }
  });

 

I would usually recommend breaking the steps down into manageable chunks - but you've already done that!
So the next step is to write the correct instructions in your code.

We don't have the capacity to code up solutions for people but we'll be here for questions if you get stuck.