Hello John. I'm not fluent in English. So I hope you understand me.

I am creating a website using superscrollorama like to use links and anchors to activate the effects.

Is it possible to do?

Thank you.

Is it possible to do that?

My offset and duration is set by the width and height of the window, which works fine. Until the user resizes the browser, which means the offset and duration are now wrong.

At the moment I am calling a function with adds the tweens again but with the new prams. It seems to be working ok, though sometimes the positioning is a little off. I just wondered if this was the correct way of doing it? Is it updating the original instance, or creating new ones?

Hello,

While developing with SuperScrollorama, I've encountered the need to add one-off triggers at a certain scroll position, and why not use the same lib to do so? It works, but to only have it fire the once I have a boolean set. If true, do nothing, and set to true the first time it completes.

I wouldn't need the boolean if I can do one of the following:

• SuperScrollorama only triggers the tween the one time so that the scroll position is a one-off trigger.
• I can removeTween from SuperScrollorama.

there!

I hope that somebody can help me out with a problem I stumbled upon.
I want to animate on a scroll by using the superscrollorama plugin.
With GSAP I can use a timeline to change the position of an element on scrolling.

I want the following actions to take place:

1. Move the element from -1900px to 550px on screen by scrolling.
2. After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px).
3. After the 2000px without movement, let the element move from it's current position to 1900.

So we have an animation of an element from the left side of the screen, to the right with a pin moment.

I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment.
This is what I have so far:

controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);

It's not much but I hope somebody can help me out here!

I noticed the animations don't playback when scrolling on iOS, I know its because safari doesn't execute JS when scrolling to keep the user interaction performant.

My question is could superscrollorama be integrated with something like jScrollpane (http://jscrollpane.kelvinluck.com/) where superscrollorama would listen to jScrollpane events vs the native window scroll events?

Besides changing which scroll events to listen to are there any other considerations I may be missing?
Is there an issue with my "target elements" or "pages" being wrapped inside the jScrollpane DOM elements and not directly inside the body tag? Would it throw off any offset calculations or anything of that nature?

Have you tried anything like this before, if so, for what reason did you abandon it?

Thank you John for your contributions.

Hiya John,

Firstly: what a great plugin! Wonderful augmentation + introduction to the Greensocks library. I feel there's going to be applications for this plug in every site I build now.

However I have a question regarding "pinning" elements (a question for which I'm sure there is a basic and obvious and answer, but for all my head-scratching I just can't seem to figure out).

If you have a look at http://www.dylanbaskind.com/example - In the first section I've got the element pin + content unfolding animation that I'm after, but I just can't work out how to get subsequent elements to correctly do the same.

Any help you could offer would be much appreciated!

Cheers, and thanks again for the plugin, its great.

Dylan.

PS. I've sent a similar message through your website, sorry for the spammage, just wanted to make sure you received my query (re: desperate plea for help :).

Is there a way to use the the same animation on multiple classes but have them trigger only when scrolled into view?

Using the code from your simple demo the classes all fire at the same time and only the first instance reverses when you scroll out of view.

I am using a onepage parallax layout in WP.

page 1
h1 class=".fly-it"
content......

page 2
h1 class=".fly-it"
content......

page 3
h1 class=".fly-it"

Would be nice to pass http://jshint.com without to much errors.

Hi! Well, I have some div's with position absolute and I'm trying pin these elements but superscrollorama don't pin...

The elements can't be position absolute?

Thanks

Hi there,

Firstly, I LOVE your plugin and think it is unbelievably brilliant! Im just really battling to get it to work!

If you look at www.vertexwebcartel.co.za (its still in development so please dont be too harsh :) ), I was able to get the About us / Testimonails to work as intended, however, the parralax wont work, neither will the other sections... I've tried everything and really dont have any idea where Im going wrong! Here is my index.php file of my template http://pastebin.com/Si8h4hR9 Any help/advice on how to get all the instances working would be very greatly appreciated!!!

The last version available is the 1.0.0 three months ago, I think a new tag should be made as a lot of changes were made in the meantime.

Hi everybody,
i'm new to superscrollrama and jquery in general.
I succesuffly implemented the basic animations on my new project, but i'm wondering if it's possible to animate in reverse the div not only if i scroll up the page, but also in i scroll down for a given amount of pixel.

i mean: i open the page, i scroll 100 pixel and the animation starts, ( then when i reach 500px height, i'd like to animate the elements back, i don't need a second animation, it would just be perfect to reverse the animation as it is. thanks for any help!

here's the code of the animation:

        controller.addTween('#foto', TweenMax.from( $('#hi') , .25, {css:{opacity: 0,left:'-1000px'}, ease:Quad.easeOutCubic}), 170);
        controller.addTween('#foto', TweenMax.from( $('#foto'), .25, {css:{opacity: 0, right:'-1200px'},ease:Quad.easeOutCubic}), 170);

the final position of the div #foto and #hi are "50%" and that's the position from where the reverse animation should start, and end at -1000px and -1200px

SuperScrollorama sends the page back to the top when the init function is called. That means the url's anchor hash is ignored—the page won't jump to the correct position automatically.

Is this a bug, or is it standard behavior?

The parallax scrolling seems to work great when the object scrolls at a faster rate than a normal scroll, however if you try to slow an object down so it scrolls slower than normal, the object has a jerky scroll.

Example:
controller.addTween(
'.opening-container',
(new TimelineLite())
.append([
TweenMax.fromTo($('.opening-content'), 1,
{css:{top:220}, immediateRender:true},
{css:{top:900}})
]),
1900, // scroll duration of tween
500
);

    .opening-content {position: absolute; top: 220px; left: 18%;}
    .opening-container {position: relative; height: 1900px;}

What is the right approach if you want to slow the object down and make it scroll at a slow rate. Above, I attempted this by absolute positioning and adding to the top value.

Hi, your plugin is amazing, is it possible to increment a number during a scrolling because normally i only see css modification on your exemple? I want to increment a number like the computer http://www.hispanicsatnbcu.com/part3.html at 57%.

Thanks !

I have a site where certain items are pinned on the site. When a user clicks a menu item, for instance with href #about, I'd like for them to be able to go directly to that object. Problem is, as the browser attempts to navigate to the pinned object with #about id, it gets 'stuck' on other pinned items.

Is there a simple way to destroy or cancel all of the pinned items/events such that the site after clicking a menu item is no longer superscrollorama-ified?

It appears that the position of elements for triggers doesn't calculate properly with jQuery 1.9 . Same code works fine upon downgrading. Let me know if you'd like an example.

Hi!
On the beginning thank you for your script. It's great!
http://arcadioenmadrid.es/scroll/mojedemoFOLIO.html
I have problem with transform3d in pinned div in Firefox. I tried to find error but I can't. Maybe it's problem with fixed position of div where transform3d is making? Or FF need -moz-transform? How I can to fix it?
I have one more question. In Chrome animations are one after one, how to make these transforms are in the same time?
Thanks a lot!
Regards

edit: On IE10 works too

Love the plugin but found an issue,

When scrolling with the mouse wheel everything works fine. But when using the browser scrolling bar the "sliding it"/"wipe it" section doesn't work as it should. The "wiping it" screen jumps on before the "sliding it" screen, totally skipping the "sliding it" section. I have found this issue is only present in Firefox (my current version 16.0) and IE 10(win 7), IE 9, IE 8. This can be replicated on your live site. http://johnpolacek.github.com/superscrollorama/.

Hi is there a way to scroll with easing ?
On a macbook it is scrolling smoothly, but with your mouse-scroll you also want that ease effect applied.

Hope to see a reply asap.

Best regards, Jay

Is it possible to add a method, like the scrollorama "destroy" one (johnpolacek/scrollorama#16)

Thanks

I'm working on a project where there's a fixed top navigation bar that links to various anchors within the page. jQuery Smooth Scroll is used to animate the effect.

Alas, the problem is that I have one section where the background is inverted on user scroll, and clicking a link on the navbar after this section causes the background animation to still fire as it's quickly scrolled past. Same as when the "End" key is pressed at the start of the document.

The result is that clicking links around this section has a tendency of breaking the animation, causing it not to fire when actually scrolled to, or only half-fire (The intent is the animation fades the background from white to black; when it half-fires, all sections are given a gray background, and scrolling between the special section and the rest doesn't cause any further animations to fire.).

Is there any way of telling Superscrollorama not to fire scroll-related animations given a particular event?

Thanks!

The code I'm using that causes this is as follows:

  $(document).ready(function(){
    var cntrl = $.superscrollorama({triggerAtCenter: true});

   cntrl.addTween(
      $('h2#dark'),
      TweenMax.fromTo(
        $('#content'),
        1,
        {css: {backgroundColor: "white", color: "#333333"}},
        {css: {backgroundColor: "black", color: "white"}}
      ),
      0,
      50,
      true
    );

    // This'll make sure the background is white if anchor nav is used.
    $('h2:not(h2#dark)').each(function(){
      cntrl.addTween(
          $(this),
          TweenLite.to(
            $('#content'),
            1,
            {css: {backgroundColor: "white", color: "#333333"}}
          ),
          0,
          true
        );     
    });

if the first things you have is a pinned element you will have some kind of ugly jump.

This is because when the user start scrooling the element will pass to position:fixed but the browser take some time to readjust everything.

I don't know the best way to fix that. On my project I initilise the element in position:fixed and use the onUnpin callback to set it back to position:relative.

I open a bug because I have the impression the logic can be a bit better even I didn't dig enough to provide a pull request.

I read the issue from a while ago, but I don't really understand.

Could you show a quick example?

Thanks :)

Hi !

while looking for a jquery-plugin doing cool animation/scrolling stuff i found this wonderfull and awesome project. So i have a liitle question: what is the difference between scrollorama and superscrollorama. Is scrollorama superseeded by superscrollorama? Or are they projects standing for it's own?

Thank you in advance!

Ciao,
Thomas

Hi,
in my case the animations were not that smooth sometimes, so I replaced the setTimeout with TweenMax's "tick" Event. Since it uses animation frames my tweens are animating smoother now.

var tickHandler = function() {
if (didScrollCheck) {
checkScrollAnim();
didScrollCheck = false;
}
};

TweenLite.ticker.addEventListener("tick", tickHandler);

Hi there... fantastic plugin... but it doesn't seem to work very well at all on iOS devices.

Does anyone know of a solution that will provide similar functionality and work without issue on iOS devices??

Animations work, but do not function smoothly like on a desktop. they stutter and jump into position AFTER scrolling has finished. I believe this has something to do with the special easing functionality for scrolling built into iOS.

Anyone with some experience with this and some advice to offer it would be greatly appreciated!

Thanks in advance, and thanks to John for such an awesome plugin!

i have problem when finish all tweens on pinned scene. after all tweens is finish then all object is disappear suddenly and remaining 1 image.

here is my code:

    <div class="span12" id="scene1" align="center" style="overflow:hidden;">

            <img src="assets/img/B.png" class="absolute" style="clear:both; left:42.5%; margin-top:140px; z-index:2;" >
            <span style="box-sizing:border-box; width:50%; float:left;">
                <img src="assets/img/wall1.jpg" class="relative" id="left-wall" style="z-index:3;">
            </span>
            <span style="box-sizing:border-box; width:50%; float:left;">
                <img src="assets/img/wall2.jpg" class="relative" id="right-wall" style="z-index:3;">
            </span>
            <div id="carpet"></div>

            <div id="beach-bg"></div>
            <div id="bch-ppl3"></div>
            <div id="bch-ppl4"></div>
            <div id="bch-obj1"></div>
            <div id="bch-ppl1"></div>
            <div id="bch-ppl2"></div>
            <div id="bch-obj2"></div>
        </div>
    </div>

then here is my tween code:

var pinDur = 6000;
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#left-wall'), 1, {css:{left:'-1000px'}, ease:Quad.easeInOut}),
TweenMax.to($('#right-wall'), 1, {css:{right:'-1000px'}, ease:Quad.easeInOut}),
TweenMax.from($('#carpet'), 1, {css:{bottom:'-500px', opacity:'0'}, ease:Quad.easeInOut})
])

   append([
    TweenMax.from($('#bch-ppl3'), 1, {css:{left:'-550', opacity:'0'}}),
    TweenMax.from($('#bch-ppl2'), 2, {css:{right:'-450', opacity:'0'}})
])
.append([
    TweenMax.from($('#bch-obj1'), 1.5, {css:{left:'-350', opacity:'0'}}),
    TweenMax.from($('#bch-obj2'), 1, {css:{right:'-350', opacity:'0'}})
])
    ;

here is a moment before finish tweening.

and here after i do 1 scroll

the remaining images on it is:
people
< i m g src="assets/img/B.png" class="absolute" style="clear:both; left:42.5%; margin-top:140px; z-index:2;" >

background ->

scene1

{
height:700px;
background:url(../img/bg_1.jpg) repeat-x;
}

Hello,

If I set an animation to trigger with an offset of -200 ( 200px before scrolling to the element ), when scrolling up it still triggers at -200px instead of at +200px.

expected use case:

user scrolls down to make an element visible. Start the transition 200px before scrolling to the item. at 0px, the element is 100% visible. 200px past, the element is invisible. When scrolling back up, 200px before the element should start to transition in, ad 0 should be fully visible, at -200px be invisible again.

If this is how it currently should work, that would still be useful information for troubleshooting. I am looking to confirm if this is an issue with superscrollorama or my implementation.

Having an issue with superscrollorama on horizontal scrolled website. The website is choppy and lagging, the scrolling is not smooth and animations are the main reason, because without them everything is much better.

You can find the issue here: http://stackoverflow.com/questions/15160738/superscrollorama-with-smooth-scroll

and here: http://stackoverflow.com/questions/15160446/nicescroll-scrolling-with-steps

This is not an issue, but I would like to see a pared down version of the demo or simply an example with just one animation option at a time.

I have currently attempted to take your demo and remove all animations except for the "fly-in" one and immediate breaks it.

Hello,

I tried to update superscrollorama today and with the new version ( the one with removePin and removeTween ), my pin's were no longer working. I had to revert to get the pin back again.

another issue is that my div being pinned is positioned via .js, and when this happens ( onResize ) the pin is still using old position values, and I am calling your updateAnimation function after re-positioning. ( note: this was tested on the older version )

Hi John,

your plugin is really terrific, and easy to implement... One thing I ran into, however, was in Firefox (on the mac at least, v. 12.0), whereby images were not responding to the #scale-it tween. This is likely (possibly, hopefully) some bad coding on my part, but maybe it's an issue with manipulating images via scroll on Firefox in general, which leads me to wonder about other browsers etc... It would be great if you had a fallback preset in your demo files (if you have a wishlist, that's a wish for it).

Anyway, here is the code in question (works great in chrome /safari... have'nt tried on PC/IE yet...

< img id="scale-it" src="img/test.png">

< script type="text/javascript" src="js/greensock/TweenMax.min.js">< /script>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">< /script>
< script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js">< \/script>')< /script>
< script src="js/jquery.superscrollorama.js">< /script>
< script>
    $(document).ready(function() {
        var controller = $.superscrollorama();

        controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .1, {css:{opacity:0, scale:0}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, scale:1}, ease:Quad.easeInOut}));
    });
</script>-->

(I added spaces in the tags so they would show up here)
any advice would be greatly appreciated! :) thank you!
jeffm~

Hello !

I'm french (so sorry for my poor english) and new in the world of Jquery, but I began to understand.
Superscrollorama is just beautiful, I actually managed to do 90% of what I was hoping.
the last 10% is for my question: How do I center in the window my div who move in my page?
My div follows well defined path by the tween but it quickly disappears from my screen, I would like the div stays centered.

Please help me :-)

Hi John,

is there any way to jump to any id within superscrollorama?

i have some pinned levels with 2 slides (teaser and detailed informations) in it. During it is pinned, another slide comes in from the right to left by scrolling down ... after that it goes back to the left and than the level gets unpinned and u reach the next level.

OOO = one slide
___ = space between slides (there are some images to see on the way between the teaser and the detail)

OOO intro
-->
OOO ___ OOO level 1
<--
-->
OOO ___ OOO level 2
<--
-->
OOO ___ OOO level 3

ive tried to use scrollTo which does nothing but stays on the very top of the site.

Another try with localscroll was some better ... it scrolls down and follows the path so that the sliding effekt is there, but it dont scrolls down enough. If i want to scroll down to the second level it will walk the path down and stops between the 2 slides in level 1.
Scrolling to level 1 works. I guess localscroll just get the scrolltop of level2 and scrolls to it. Cause of the pinned element before, it dont scrolls down enough.

Calling controller.removePin($('#el'), false); works as expected, however:

controller.removePin($('#el'), true); results in the following error?

TypeError: pinObj.origPositioning is undefined

Having a bit of issues with the pin method. Works as expected when scrolling down, but when I scroll up the generated pin-spacers seem to take up the whole screen and make everything go white. Any ideas?

My code is as follows:

HTML:
This is just a simple html unordered list.

CSS:

ul {
    position: relative;
    width: 100%;
}

li {
    width: 100%;
    height: 100%;
    padding: 0;
    margin-top: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript:

var sHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height;

function portfolioScroll(el) {
    var $this = el,
    $next = $this.next('li'),
    animation = new TimelineLite();

animation.append(
    TweenMax.to(
        $next,
        1,
        { css : {opacity : 1} }
    )
);
return animation;
}
(function() {
    var controller = $.superscrollorama(),
    $par = $('#portfolio ul'),
    $this = $par.children('li'),
    $offset = $par.offset()
    pinDur = sHeight;

    $par.height(sHeight);

    $this.each(function(index, element) {
        $this = $(element);
        controller.pin(
            $par,
            pinDur,
            {
                anim: portfolioScroll($this)
            }
        );

        $this.css('z-index', index);
    });
})();

You can see the issue here: www.creativesunderground.com - scroll down past the portfolio area a few images or so. Then scroll back up and you'll see everything turn white.

In the same idea than #48 we can avoid calling offset multiple time.

The Firefox's profiler show me this is where the script use most of the time. For my usage I even create my own offset function than is faster than the jQuery once. I can avoid some test than jQuery need like testing if we are in a iframe or not...

I will be happy to make a pull request but want to know what do you prefer:

• jute avoid unnecessary $.offset() call (their is 4 call by animated object and I can reduce that to one call)
• replace the $.offset() with an alternative function a bit (~20%) faster.

You can see my version performing on http://face-it.ch/fr/mission/congo (it still a work in progress and script are uncompressed at least for the moment).

Clearly, Super Scrollorama is amazing. However, it's simply too dense for anyone new to jQuery to parse with any ease.

I would love to see a simple breakdown of how to use the plugin. After spending an entire day trying to piece together how to accomplish things, I am no further along than I was when I started.

There's nothing even remotely like Scrollorama or Super Scrollorama out there for pinning or animating based on scroll position. A simple tutorial site, similar to what jQuery Waypoints offers, would be wonderful. Just a thought.

Does this plugin work with Scrolldeck? Currently I cannot get it to work with it.

Scrollorama works just fine with it by the way.

The previous Scrollorama could be found in the Bower registry, would be nice if the new version was too.

Hello,

first of all I have to thank you for this awesome script.

I don't understand combining of .addTween() with TimelineMax (with labels or without) and scroll duration in pixels.

For example:

var tl = new TimelineMax({paused: true}),
    $box = $('.box');

tl.insert('part1', 0);
tl.insert('part2', 4);

tl.insert(TweenMax.to($box, 1, {css: {left: 300}}), 'part1');
tl.insert(TweenMax.to($box, 2, {css: {left: -200}}), 'part2');

$.superscrollorama().addTween(500, tl);

It does what I expect: at 500px of window scrollTop it begins animation to 300px left in 1s. Then wait 3s, then begins animation to -200px left in 2s.

But I would like set scroll duration in 600px. So instead:

$.superscrollorama().addTween(500, tl);

I want this:

$.superscrollorama().addTween(500, tl, 600);

It works also, but could you please explain me, how do you convert seconds in TweenMax or in labels of TimelineMax into scrolling pixels? When I change:

tl.insert('part2', 4);

to:

tl.insert('part2', 15);

what happens then? How many seconds is at 100% of timeline?

Thanks very much for reply.

Hi,

I'm trying to get a smooth scroll for my website using Tweenlite/Tweenmax. I've seen this post:
#14

But the plugin you're suggesting isn't doing well on performance in my opinion. I've tried to get this plugin to work:
http://manos.malihu.gr/jquery-custom-content-scroller/

It scrolls tremendously but scrollorama fails to trigger the animation once used. Then I've posted a question on the greensock forum:
http://forums.greensock.com/topic/7691-scrollorama-trigger-without-scroll-at-start/

In which I was given an answer that I should post my question here, and that a guy has tried (and prevailed) to get a smoothscroll by using Tweenmax/TweenLite. Which you can find here:
http://harabeishio.panayotov-consult.com/tweenlitemousewheel/

I've looked at his JS and tried to extract it and copy it into my website but with this plugin scrollorama still works except the fact that scrolling can only be done by dragging the mouse not by use of a mousewheel. If you scroll with the mousewheel he jumps back to the top and stays there.

The first plugin I suggested is too advanced for my project but the last one will fit perfectly. So my question: How can I get tweenlitemousewheel plugin to work with scrollorama?

Much appriciated,

Youri

When the mouse cursor is positioned over a fixed element scrolling is no longer possible. After moving the cursor off of the element scrolling can continue.

Suppose I want to execute a function at the begining of animation, what if I want to execute the same function at the begining of animation reversing?

Hi, thanks for your script, this is totally amazing!

Im trying to do my own portfolio using it... but i begin to ask myself if this was a mistake or not.
Please check my website using superscrollorama, and scroll down to the "processus" section. It will be easier to see what im talking about: http://www.thomaslartaud.com

When i scroll down to the end of the processus section, and then scrollback, the script bug, and tweens go to wrong values, that makes the scroll animation stops at the wrong place.

This is how i Pin the Processus Section:
$(document).ready(function() {
controller.pin($('#processus'), $('#etape_controllers').height(), {
anim:null,
spacer:'50px',
onPin: function() {
$('#processus').css({height:'100%',top:'0px'});
$('html').getNiceScroll().onResize();
},
onUnpin: function() {
$('html').getNiceScroll().onResize();

                }
            });

});

And there, this how i use some empty div to control when animation should start.

$(document).ready(function() {
controller.addTween($('#controller1'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '0px -12px'}})
);
controller.addTween($('#controller1'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '0px'}})
);
controller.addTween($('#controller2'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '210px -222px'}})
);
controller.addTween($('#controller2'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-550px'}})
);
controller.addTween($('#controller3'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '420px -432px'}})
);
controller.addTween($('#controller3'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-1100px'}})
);
controller.addTween($('#controller4'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '630px -642px'}})
);
controller.addTween($('#controller4'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-1650px'}})
);
controller.addTween($('#controller5'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '840px -852px'}})
);
controller.addTween($('#controller5'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-2200px'}})
);
controller.addTween($('#controller6'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '1050px -1062px'}})
);
controller.addTween($('#controller6'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-2750px'}})
);
});
When i navigate this section really, really slowy, there is no bug. I think there is a problem on tweens with chainability. Maybe that each tween are executed separately, which makes some unwanted decals.

Please could you helps me to find a fix to this ? I tried so many things, so many different syntax, i tried to use timeline, i tried to uses tweens in a same controller with the append function, and more ... Nothing worked. I always got the same random buggy result. I'm about to finish this website, i just hae to find where that f**** bug comes from ...
Please help me. Just spent two completes days on that bug... If i cant resolve, i'll have to remake all the website with another solution, and i don't want to do that :(
Please help!

I have a project I've been working on that needs to work in IE 8 and requires some elements to be rotated.

I thought it was how I arranged my code, however I looked at http://johnpolacek.github.io/superscrollorama/ and noticed the characters don't rotate in IE 8 in the header when you initially scroll, nor in the "SPIN IT" section.

I was initially thinking it was because of them being in a "position: fixed;" element from being Pinned, however the SPIN IT section isn't in a fixed position container.

I tried modifying the positions of various parent/sub-elements for SPIN IT in the IE Dev Tools however was unable to get the text to spin, no matter what I applied.

Any ideas to get rotation working in IE 8? This might be more a GSAP Problem then it is a Super Scrollorama but figured I'd ask as that demo site is affected by it.

Hey hey,

So I'm running into a problem when getting my project work on mobile devices. First let me recap what I've done.

I was having performance issues (background image jittering) when using the traditional parallax scrolling methods of adjusting top: values of elements and content wrapper while also changing backgroundPosition. This lead me to implement the following structure:

div id="vertical-scroll"
div id="main"
div id="home-section" class="section"

Basically, #vertical-scroll height: is set to be equal my superscrollerama animation length and all animations are based off scrolling this div. The #main has the following properties position=fixed, height=window, width=window, overflow=hidden. All of my tweens occur in this div. This allows me change backgroundPosition, top, left, height, and width of these divs without fighting the browsers scrolling. The result fixed box with elements flying in and out, resizing, etc. as the #vertical-scroll is scrolled. This works excellent on desktop browsers but not at all on mobile.

I've been looking into the iScroll fix recently released, but that results in my fixed #main being translated up and scrolled out of view.

What I need is a way to keep my #main div fixed in the same position on the screen and have any touch scrolling activate the superscrollerama animation tweens. Any suggestions?

Thanks a lot for the help! This has been killing me for the past week.

I have downloaded the zip file for superscrollorama twice and while the index.html file works perfectly, I see absolutely no animations with the demo.html and demo2.html pages. Worse, I tried a very very simple fade animation with it and nothing is happening on my own little demo page. I have looked at them in Firefox and Google Chrome. Can you take a look at the demo pages from your zip file on the website and reproduce my problem? You can check out my sad little attempt at this address: http://omagency.com/demo.html I included scripts for JQuery, a link to the Tweenmax.js, and a path to your scrollorama.js file.

Hello,

Setting the reverse param in addTween does nothing due to how it is coded:

            reverse: reverse || superscrollorama.settings.reverse

You can not evaluate if a boolean is set in this manner. If I pass in false then the test fails, and it uses the superscrollorama.settings.reverse anyhow.