Scrolltrigger scale image and pin

[Superloop]

Hi! 

I'm trying an animation, but I don't know how to use ScrollTrigger to make it.

I attach a codepen.

I have different blocks with different images.
What I would like to do is have the images in the first block  (only this first one) take up 100% of the screen, and as I scroll down, scale them until the block is pinned in the middle of the screen. Then, as I continue scrolling, the images would move within their frame.

I have the second part of the animation working, but I'm not sure how to achieve the initial zoom effect.

 

If anyone could guide me on how to do it, I would greatly appreciate it.

Thanks so much!

See the Pen XWGQMeN by superloop (@superloop) on CodePen

[mvaneijgen]

Seen that you want this all to happen right after each other I would just add the tween to the one timeline you have and just make the scaling part of the whole timeline. If you want to have the pinning of everting start earlier then just create an extra ScrollTrigger that just does the pinning. Hope it helps and happy tweening! 

 

See the Pen bGZJWzW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Superloop]

Thanks so  much @mvaneijgen! 

 

It's almost that!  

I've modified the code slightly so the image doesn't stay on top of the first text and I only want the "zoom" effect in the first "block"

 

See the Pen RwdOxKy by superloop (@superloop) on CodePen

 

But if I want the zoom effect to start at the "top top" while keeping the "block" pinned where it currently is, should I create another scroll trigger? This is where I get a bit lost... I'm also not sure how to call a timeline without pinning (like I did with the title appearance effect). The title appears, but it doesn't disappear. With this, I'm a bit confused. My head is spinning!

[mvaneijgen]

I see, if every block was the same it would be much simpler because then you just have to build the animation once and then focus on the ScrollTrigger aspect, but here you want one specific thing to happen en then something else for every repeat. 

 

Then I would just make it separate from the repeating stuff, so have one block called .featured which is above everything and then repeat for each block. I don't have to time to make everything line up, but this shows the general gist. Be sure to check the page with out any Javascript code. 

 

You could use the Flip plugin https://gsap.com/docs/v3/Plugins/Flip/ to move the big image the the first container instead having to figure it out with a scale and then it only a matter of setting the right start and end triggers. Hope it helps and happy tweening! 

 

 

See the Pen bGZJyNG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen