why toggle class is not adding the class when triggered

[rohitsinghshan 0 Likes (Newbie)]

ToggleClass is not working. It's not adding the class when the trigger is called at #scene-brush-alt and remove class at end trigger. You will get script at last in codepen

See the Pen dyJVaBV by shaan-singh (@shaan-singh) on CodePen

[Carl 11,108 Likes (Superhero)]

 

I saw 2 potential problems.

Your section in question appears to be  the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top".

You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport.

 

in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point.

 

See the Pen vYpdOWL?editors=0010 by snorkltv (@snorkltv) on CodePen

 

in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.

 

[rohitsinghshan 0 Likes (Newbie)]

21 minutes ago, Carl said:

 

I saw 2 potential problems.

Your section in question appears to be  the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top".

You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport.

 

in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point.

 

 

 

 

in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.

 

Sorry for lengthy code and Yeah sir, Sticky class is applying at the bottom where I have to remove it, I want to apply it when we scroll to  <div class="scene-brush-alt" id="scene-brush-alt"> and end at 

<div class=" scene-alt scene-details-alt  scene-7-alt" id="scene-7-alt">

[Carl 11,108 Likes (Superhero)]

if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger

Quote

endTrigger    String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

 

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[rohitsinghshan 0 Likes (Newbie)]

15 hours ago, Carl said:

if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

I'm using endtrigger sir
 

    let fixed = gsap.timeline({

  scrollTrigger: {

    trigger: "#scene-brush-alt",

    endTrigger:"#scene-7-alt",

    start: "top top",

    end: "bottom+=10",

    toggleClass: "fixed"

  },

});

[Carl 11,108 Likes (Superhero)]

very good. i guess I missed that. 

If you would like more help please create a new, reduced demo. I suspect you could replicate whatever issue you have with 20% of the code you have and greatly increase your chance of getting quick help.

 

When you make your demo please keep in mind the fact that no one here is familiar with your project or your naming conventions.

 

ids like "scene-brush-alt" have no relation to what we see on the screen. same with "scene-7-alt".

 

Also keep in mind that most of the people trying to help you are only fluent in English. 

better to have text that says "Section 1 Text" than "Die neuen Dr.BEST GreenClean INTERDENTAL"

 

My best advice create 3 colored divs. This way we can clearly see where they begin and end.

First section just creates room to scroll

Second section is the section you want to toggle the class of

Third section is the one you want to use for the endTrigger

 

Start small and only add things that help replicate the issue you are facing.

Hope this helps