Jump to content
Search Community

ScrollTrigger onToggle question.

Filip1139 test
Moderator Tag

Recommended Posts

Hi. I want to pin a section and change child sections using fadeIn-fadeOut. I tried to use the onToggle method to get the data attribute or just index for the current section, but in this case "onToggle" doesn't work. Same with "toggleClass". Do you know why this is happening? I know I don't need data attributes, index is enough, but I've tried to do it in different ways.

See the Pen poPvdEx by nomad1139 (@nomad1139) on CodePen

Link to comment
Share on other sites

1 hour ago, Filip1139 said:

Hi. I want to pin a section and change child sections using fadeIn-fadeOut.

Hey there!

 

Not sure what you mean by this - what's fadeIn-fadeOut?

You have a scrub on the last scrolltrigger but it's not controlling any animations. What are you trying to accomplish?

Link to comment
Share on other sites

I want to pin section with '.pin-me'  like on codepen. When user scroll to 'data-step-trigger =2' i want to add hide animation or remove class from "data-step=1" and  and show animation / class to "data-step = 2".  If screen top touch 'data-step-trigger = 3 " then hide 'data-step = 2 ' and show " data-step = 3 "ect. Just replace content based on scroll.  

 

Do you know why 'onToggle' or 'toggleClass' not working? For example 'onEnter' or other methots works while i scroll.

Link to comment
Share on other sites

I noticed several problems:

  1. You set your start to "top top" (good) but your end was "bottom bottom" and your trigger element is exactly the height of the viewport, thus when its top hits the top, its bottom hits the bottom. So the start and end are right on top of each other (not good). So of course it wouldn't toggle :) I think you meant end: "bottom top" or end: "+=100%" (functionally the same in this case). 
  2. The loop is using a zero-based index but it looks like you set your attributes as 1-based, so it would put the is-active one section BELOW what's actually on the screen. 
  3. There's no reason to set scrub: true on a ScrollTrigger that has no animation associated with it. It doesn't hurt anything, it's just pointless. 

Here's a fork with those changes in place: 

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

 

But of course that doesn't do any fading like you wanted. 

 

Here's a totally different way you could set it up that I believe gives you the result you wanted (unless I misunderstood): 

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

 

I hope that helps!

  • Like 2
Link to comment
Share on other sites

Thanks for the advice. Good opinion :) Your solution is almost perfect, I prefer your way. Thanks for taking a fresh look at this issue. I said almost perfect because if I have content below the pinned section, the pinned section overlaps the one below. The pinned section does not have the correct height.

 

See the Pen QWvbEXz by nomad1139 (@nomad1139) on CodePen

Link to comment
Share on other sites

These forums aren't really for providing *perfect* solutions. Think of the demo as a step in the right direction!

I'd recommend getting stuck in to it, reading the docs and trying to figure out how it all works.

We're totally here for questions if there's anything you're battling to understand.

Here - I've tweaked Jack's demo to expand out the ternary - you can see that it's just a function. You can write any custom logic in there you want!

See the Pen b7d607ff9ccecb148cfcdf2900a22a7a by cassie-codes (@cassie-codes) on CodePen


 

  • Like 2
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...