Jump to content
Search Community

ScrollTrigger pinned sections and anchors links

jagu51 test
Moderator Tag

Recommended Posts

Hello!!


First of all, i'm sorry for my English. 

 

I am currently working in my first project with scrolltrigger, but i have problems with anchor links.
The project has in addiction to slider and footer, five pinned sections with some animations (text and backgrounds). Everything seems to work fine. The problem comes with the anchors links (OPTION 1, OPTION2..) that aren't working right and the position of the section is not the right one (The end of the animation of each section is when elements food and background are into the window).

 

Can someone help me please? I need that when i click in each option of the menu it goes to the end of the animation of the relevant section.

 

Thank you in advance.

 

See the Pen xxgqwpL by jagu51 (@jagu51) on CodePen

Link to comment
Share on other sites

It seems to be going to the correct spot, right? Are you just saying that you want it to scroll PAST where that element is so that it goes to the end of the animation? If so, it looks like you've got it pinned for 570px, so you could use the offsetY feature of ScrollToPlugin. Also, for CodePen you shouldn't include all your <html><head> and script stuff in the HTML. Here's a fork: 

See the Pen 368dfe297c87e6749b0ecf75b61fd3cd?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

1 hour ago, GreenSock said:

It seems to be going to the correct spot, right? Are you just saying that you want it to scroll PAST where that element is so that it goes to the end of the animation? If so, it looks like you've got it pinned for 570px, so you could use the offsetY feature of ScrollToPlugin. Also, for CodePen you shouldn't include all your <html><head> and script stuff in the HTML. Here's a fork: 

 

 

 

Thanks for your quick response but it doesn’t work. I have tried to fix it, but i cannot. I uploaded an example to vimeo to show you that i need. I am very frustrated 😢

 

 

Link to comment
Share on other sites

13 hours ago, GreenSock said:

You could just use the "end" value directly from the associated ScrollTrigger. Just give each one an id and look it up accordingly: 

 

 

 

Is that what you want? 

Yesss!! you did it!! Thank you very much for your help!! The support in this forum is amazing.

 

One last thing. I'm, trying to masking the div with class .content, but doesn't work well. Do you know what the reason can be?

 

I tried with .content{ overflow:hidden} but strange things happen .  I attach one image showing that i need.

 

Thanks!

scrolltrigger.jpg

Link to comment
Share on other sites

4 hours ago, jagu51 said:

One last thing. I'm, trying to masking the div with class .content, but doesn't work well. Do you know what the reason can be?

Unfortunately that's more of a layout/CSS/logic thing and we just don't have the resources to offer free consulting services for solving things like that for you. We really try to keep these forums focused on GSAP-specific questions. If you need custom consulting, feel free to contact us and we can talk about pricing and scheduling. Or you could post in the Jobs & Freelance forum

 

Of course anyone else here is welcome to chime in if they have suggestions for you. 

 

Good luck with the project. 

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.
×
×
  • Create New...