search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.92k stars 2.17k forks source link

Section Wipes(manual) w/ Css Class Toggles #490

Open jaaamesk opened 8 years ago

jaaamesk commented 8 years ago

Hello! I'm trying to implement the section wipes (manual) with class toggles... Since the section wipes (manual) has the pinned element set as the wrapper (#pinContainer), the css class toggles isn't able to detect the scenes that are swinging into the viewport.

Here's an example:

Lets say I have a header within a page that has the section wipes (manual). Each nav link within the header scrollTo()'s to the corresponding section. Now, when I press the last link, the last section has a different background color then the other 3 sections (lets say the first 3 sections have a black background, with the header nav link texts being white). When I either scroll into or click into the 4th section/panel, I'd like the header nav links to switch to black so it is legible (since the last section/panel background is white).

Any help is greatly appreciated!

Ihatetomatoes commented 8 years ago

Can you provide a CodePen demo? That would help tremendously.

jaaamesk commented 8 years ago

https://jsfiddle.net/ffugftk3/

Here ya go!

As you can see here, I've tried adding it within the timeline after a pass of each slide (with .call() )... Now this is a very messy way of doing it, and also i'm unable to add it for the first slide...