How to animate scrolltrigger in scrolltrigger foreach

[ncti]

Hi,

I have an animation on the entire page for each panel (I have several sections with this class) and I would like to additionally pin a photo inside the phone in a specific section (instagram) and move it along with the scroll. Unfortunately, every time my photo reaches the panel instagram section and I start to animate the photo inside the phone, it moves all at once.

 

It is possible to set position absolute on pinned element? I have problem with overflow hidden, when image has position fixed.

See the Pen WNGWXrQ by memek42 (@memek42) on CodePen

[ZachSaucier]

Hey ncti. First off, I noticed that you're making one of the most common GSAP mistakes and are using the old syntax. We highly recommend using the newer syntax - upgrading is easy!

 

As for your question, I highly recommend that you get each piece working individually that you need and then work to get them working together. Right now if I comment out the first section looping through your panels, the second section still doesn't work well. I'd try to get that working the way you need it to work before combining it with other ScrollTrigger sections.

 

Side notes:

• It's invalid HTML to have multiple sections with the same ID. 
• scaleX: 0 and transformOrigin are not valid properties of ScrollTriggers.
• If you're just pinning something there's no need for a timeline, you just need a ScrollTrigger which you can create using ScrollTrigger.create().

[ncti]

16 hours ago, ZachSaucier said:

As for your question, I highly recommend that you get each piece working individually that you need and then work to get them working together. Right now if I comment out the first section looping through your panels, the second section still doesn't work well. I'd try to get that working the way you need it to work before combining it with other ScrollTrigger sections.

Thanks for the answer.
I have already corrected the bugs.
However, I don't understand what you mean by saying that I should do everything separately. Could you explain it to me more clearly?

[ZachSaucier]

7 hours ago, ncti said:

I don't understand what you mean by saying that I should do everything separately. Could you explain it to me more clearly?

I mean that in your end effect you want several different animations/effects to happen. I recommend creating each piece in a standalone way and then combine them so that you have a more firm understanding of what's going on  

[ncti]

On 1/22/2021 at 3:32 PM, ZachSaucier said:

I mean that in your end effect you want several different animations/effects to happen. I recommend creating each piece in a standalone way and then combine them so that you have a more firm understanding of what's going on  

Thanks, I made it.