Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Question: Setting classes and different scroll position #135

leesherwood opened this Issue Jan 22, 2014 · 3 comments


None yet
3 participants

Hopefully this ok to ask here, i couldn't find a reliable source of help for this plugin (help on stackoverflow seems limited for this plugin).

I have two things i'm trying to do, first i need to simply add a class to an element when the element hits the top of the page. No animation or fancyness, just add a class. Is there a way of hooking into the plugins scroll watcher, so rather than using tweenmax, i can just run a simple function. If not, is there a way of doing it at all without having a seperate scrollwatcher for the simple stuff? I tried using TweenMax.set(), but when i use this:

            (TweenMax.set('header', {
                className: "static"

It sets the classname immediately on load, i even have the "triggeratcenter" set to true, so i would have expected it to just add the class at the center position.

Following on from that, with the above, i want to add the class when it hits the top of the window, rather than in the center. How do i specify for this specific twen, that it must fire when the element hits the top of the viewport?

Any help would be greatly appreciated

jkrot commented Jan 22, 2014

I used the
http://patik.com/blog/within-viewport-javascript-and-jquery-plugin/ to add
that functionality and tied into it for my project.

On Wed, Jan 22, 2014 at 11:08 AM, leesherwood notifications@github.comwrote:

Closed #135 #135.

Reply to this email directly or view it on GitHubhttps://github.com/johnpolacek/superscrollorama/issues/135

i did think about using another plugin for the basic stuff, but i didn't like the idea of having two scroll watchers, seems to be a bad idea performance wise. I found there's an additional option you have to specify to stop it rendering the tween immediately which has got it working now anyway.

A bit annoying i have to go through the tween object to set a class, can't be as performant as just a javascript callback with a jquery "addClass()" method, but i guess it was go through the tween object, or use a seperate plugin, and i would imagine using the tween object is better than a second scroll watcher.... although i don't know for sure

prochorz commented Jan 28, 2017 edited

Make like this
controller.addTween('.instrument__tabs', TweenMax.to( $('.instrument__tabs'), 0.5, { className: "+=run" } ), 0, 200);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment