How to pin the frame1 & then the element inside the frame1?

[Arun V]

Hi All

 

Please take a look at animation in full view mode

https://codepen.io/av-fwstudio/full/BaOrYOm

Couldn't figure out how we can pin the rim so it will go till the end of the yellow container?

See the Pen BaOrYOm by av-fwstudio (@av-fwstudio) on CodePen

[Rodrigo]

Hi @Arun V and welcome to the GreenSock forums!

 

Nested pinning is not the simplest thing to do and in this case things are a bit more complicated since you seem to be pinning an element that resides an element that is already pinned, which is also the trigger in both ScrollTrigger instances.

 

I've been fiddling with your codepen for a bit and unfortunately can't find a way to make it work with your current setup, which also has some calculations for the end points of some ScrollTrigger instances.

 

If I was you I'd start super simple and have just the rim image and try to work it out like that.

 

Another option is to layer the content after the rim section with the rim section still pinned as seen in this example:

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

 

As you can see there are a few options but the result you're trying to achieve is not the simplest one.

 

Hopefully this helps.

Happy Tweening!