ScrollTrigger layered pinning inside a pinned element

[HiLuLiT]

Hey all,

let's start from this demo that I have built - 


the effect i'm trying to achieve can be seen here:
https://www.nightingale.world/about/
(reference just the scroll effect on the image while scrolling )

 

and also in this example:
https://codepen.io/GreenSock/pen/KKpLdWW

As you can see in my demo, I have a pinned <div> ('.slide' class) and for each pinned slide i'm applying timeline animations.
i'm trying to add an animation on the images ('.img' class), but  unfortunately this doesn't seem to work, the images just stack on top of each other...

What am I doing wrong? I'm struggling...would love someone's help with this...
Thanks

See the Pen bGejGPQ by HiLuLiT (@HiLuLiT) on CodePen

[HiLuLiT]

the example from above:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 

[akapowl]

Hey @HiLuLiT

 

I myself am a bit short on time right now, to take a look on your code, but the following threads actually contain demos with two different approaches to this. Maybe these examples can at least serve as inspiration meanwhile.

 

One of them (my own) is tweening on the height of the 'images' and the other one is translating the images on the y-axis.

 

 

 

 

Cheers,

Paul

 

 

[mikel]

Hey @HiLuLiT

 

The nightingale effect regarding the image animation could be managed by clipPath.

Here an example with ScrollTrigger

 

See the Pen cf3df695077b033d9cab544546e2c3ca by mikeK (@mikeK) on CodePen

 

Happy clipping ...

Mikel

 

[HiLuLiT]

 @mikel - I'm still getting used to Gsap & ScrollTrigger and it feels like i'm not on this level yet lol... are you familiar with a vertical demo of this effect?

 @akapowl - the demos could work, i will try them out... and if you can have a look when you have some time i'd love that

Thank you both! I really appreciate it

[mikel]

Hey @HiLuLiT,

 

Just a simple example

 

See the Pen dyXQWaj?editors=1000 by mikeK (@mikeK) on CodePen

 

Happy clipping ...

Mikel

 

[HiLuLiT]

@mikel Thank you, I tried implementing this but i'm having a problem with scaling SVG inside a container... any suggestions? it just doesn't seem to fit my image size

[HiLuLiT]

@mikel - Sorry to bother you with this, as it turned out pretty nice, here's an updated demo -
only problem is now I can't find a way to scale the svg.... any suggestions?

See the Pen OJXajjx by HiLuLiT (@HiLuLiT) on CodePen

[mikel]

Hey @HiLuLiT,

 

You are using the same id for the images - not good.

 

Try

image{
  height: 100%;
}

 

Happy learning ...

Mikel

 

[HiLuLiT]

@mikel we're almost there.... defently looks better, I update the demo:

See the Pen OJXajjx by HiLuLiT (@HiLuLiT) on CodePen

still problem remains - I want the SVG element to be 100% width of container (grid width) and 400px height... anything I try doesn't seem to work 

[mikel]

Hey @HiLuLiT,

 

Your flex structure is too complicated for me.
Here is the simple solution

 

See the Pen jOrQvLK?editors=1100 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel