Jump to content

Arun V

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

Moderator Tag

Recommended Posts

Hi All


Please take a look at animation in full view mode


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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.