johnpolacek/superscrollorama

The original jQuery plugin for supercool scroll animation. NOTE: No longer under active development. New version is ScrollMagic.js

#SuperScrollorama

The jQuery plugin for doing supercool scroll animation.

Check out the Project Page for more information.

IMPORTANT INFORMATION:

Superscrollorama has been replaced by ScrollMagic

Check out ScrollMagic here or visit it on GitHub: https://github.com/janpaepke/ScrollMagic
There will be no future versions of Superscrollorama and support will also focus on ScrollMagic.
So if you're starting a new project we strongly recommend to use ScrollMagic instead.

Contact

Follow me on Twitter

Need help building your website? Contact us

License

SuperScrollorama is dual licensed under the MIT license (below) and GPL license. The Greensock Animation Platform (GSAP) is used with permission per its license agreement (see below). For more information, go to http://www.greensock.com/licensing/

MIT License

Copyright (c) 2012 John Polacek

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GSAP LICENSE

"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT

PLAIN ENGLISH SUMMARY:

You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. See http://www.greensock.com/club/ for details. Use at your own risk. No warranties are offered. Please respect the copyright.

LEGALESE:

This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc. ("GREENSOCK") for the proprietary GreenSock code known as TweenLite, TweenMax, TweenNano, TimelineLite, TimelineMax, and other copyrighted code that is available for download at http://www.greensock.com (this code and documentation, as well as any updates which may at GREENSOCK's sole discretion be provided to you from time to time, are referred to in this Agreement as "PROGRAM"). By downloading, copying, or otherwise using the PROGRAM, you agree to the terms and conditions of this Agreement. If you do not agree to the terms and conditions of this Agreement, please do not download or use the PROGRAM.

I. LICENSE A. Subject to the terms and conditions of this Agreement, GREENSOCK hereby grants you a non-exclusive, worldwide, non-transferable right to use the PROGRAM in apps, web sites, games, components and other software applications ("Developed Works") for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed Developed Work for which end users are charged a fee (either for usage or access), simply sign up for the appropriate corporate Club GreenSock membership at http://www.greensock.com/club/.

II. LIMITATION OF LICENSE AND RESTRICTIONS A. You agree that you will not sell, rent, or license the PROGRAM's source code or any derivative works thereof to any third party without the prior written consent of GREENSOCK. Distribution of the PROGRAM as part of your Developed Work is acceptable so long as it is used exclusively as a part of your Developed Work. You agree not to modify or delete GREENSOCK'S existing copyright notices located in the source code.

B. You may use, duplicate, and distribute the compiled object code as embedded in Developed Works created by you, either for your own use or for distribution to a third party so long as end users of the Developed Work are not charged a fee for usage of or access to any portion of the Developed Work. Please see http://www.greensock.com/licensing/ for descriptions of Developed Works that qualify for the "No Charge" license.

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

III. CONSIDERATION A. The license rights granted to you under this Agreement are at no charge, but only in the following circumstances: If on your own behalf or on behalf of a third party you incorporate the PROGRAM into a web site, app, game, program or any component thereof (collectively, "Developed Work"), which in the case of a web site, must be accessible to internet users without payment of a fee of any kind, and in the case of a software application, game, program or component, neither you nor anyone to whom you distribute the Developed Work charges a user a fee of any kind to use such Developed Work or application, game, program or component into which such Developed Work is embedded. The foregoing shall apply regardless of whether you are paid to create such Developed Work.

B. In the event your intended use of the PROGRAM does not meet the criteria for the "no charge" license rights set forth in the immediately preceding paragraph, then you are not licensed to use the PROGRAM under this Agreement and must license the PROGRAM under GREENSOCK'S separate fee-based Software License Agreement which is granted to corporate Club GreenSock members (see http://www.greensock.com/club/ for details).

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

IV. TITLE AND OWNERSHIP A. The PROGRAM is licensed, not sold, and is protected by copyright laws and international treaty provisions. You acknowledge that no title to the intellectual property in the PROGRAM is transferred to you. You further acknowledge that title and full ownership rights to the PROGRAM, including all intellectual property rights therein, will remain the exclusive property of GREENSOCK and you will not acquire any rights to the PROGRAM except as expressly set forth in this Agreement. You agree that any copies of the PROGRAM you make will contain the same proprietary notices which appear on and in the PROGRAM. You agree that GREENSOCK may identify you as a licensee unless you make a written request otherwise. GREENSOCK hereby grants to you the right to disclose that your product, game, software application, component, or other Developed Work makes use of GREENSOCK code (for example, "Powered by TweenLite").

V. DISCLAIMER OF WARRANTY AND LIMITATION OF LIABILITY A. THE PROGRAM IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. GREENSOCK DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE PROGRAM WILL MEET YOUR REQUIREMENTS OR THAT OPERATION WILL BE UNINTERRUPTED OR ERROR FREE. GREENSOCK shall not be liable for special, indirect, incidental, or consequential damages with respect to any claim on account of or arising from this Agreement or use of the PROGRAM, even if GREENSOCK has been or is hereafter advised of the possibility of such damages. Because some states do not allow certain exclusions or limitations on implied warranties or of liability for consequential or incidental damages, the above exclusions may not apply to you. In no event, however, will GREENSOCK be liable to you, under any theory of recovery, in an amount in excess of $250. Notwithstanding anything else in this agreement, you agree to indemnify GREENSOCK, its assignees, and licensees, and hold each of them harmless from and against any and all claims, losses, damages, and expenses, including legal fees arising out of or resulting from any negligent act or omission by you.

B. GREENSOCK may, at its sole discretion, provide support services related to the PROGRAM, but has no obligation to do so.

VI. TERMINATION If you at any time fail to abide by the terms of this Agreement, GREENSOCK shall have the right to immediately terminate the license granted herein and pursue any other legal or equitable remedies available.

VII. MISCELLANEOUS A. This Agreement shall be construed in accordance with the laws of the State of Illinois. In the event of any dispute between you and GREENSOCK with respect to this Agreement, we both agree that if we cannot resolve the dispute in good faith discussion, either of us may submit the dispute for resolution to arbitration with the American Arbitration Association before a single arbitrator using the AAA Rules for Commercial Arbitration. The arbitrator's decision is final and can be enforced in any court with jurisdiction over such matters.

B. This agreement represents the complete and exclusive statement of the agreement between GREENSOCK and you and supersedes all prior agreements, proposals, representations and other communications, verbal or written, between them with respect to use of the program. This agreement may be modified only with the mutual written approval of authorized representatives of the parties.

C. The terms and conditions of this Agreement shall prevail notwithstanding any different, conflicting, or additional terms or conditions which may appear in any purchase order or other document submitted by you. You agree that such additional or inconsistent terms are deemed rejected by GREENSOCK.

D. GREENSOCK and you agree that any xerographically or electronically reproduced copy of this Agreement shall have the same legal force and effect as any copy bearing original signatures of the parties.

Copyright 2006-2012, GreenSock, Inc. Updated 2012-05-15

superscrollorama's Issues

Object suddenly disappear after finish pinned scene

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;
}

Pinned elements block scrolling.

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.

Unable to pare down demo

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.

reverse param is ignored

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.

Animation reversing has an issue with offsets

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.

ScrollTo and Superscrollorama

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

Could you show a quick example?

Thanks :)

Question: superscrollorama vs. scrollorama

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

Can I center my div in the window ?

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 :-)

Preventing animation when scrolling past element

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
        );     
    });

Pass jshint

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

Firefox issue?

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~

Issues with jQuery 1.9

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.

cancel/destroy superscrollorama pinned events

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?

Superscrollorama & Scrolldeck?

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

Scrollorama works just fine with it by the way.

Tutorial for new folks?

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.

smooth animation

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);

Superscrollorama not functioning properly on iOS

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!

Type error when calling reset on removePin

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

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

TypeError: pinObj.origPositioning is undefined

Superscrollorama and smooth scrolling

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

Scrolling Increment

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 !

Smooth easing in scroll

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

Combination of .addTween(), TimelineMax labels and scroll duration in pixels

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.

Can I call a function during animation start/reverse?

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?

Start animation, interupt, continue animaton

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!

Demo files do not work with download?

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.

Scrolling in IE and Firefox

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/.

iOS

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.

Add Bower support

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

Tweenmax mousewheel scroll easing

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

anchor links

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.

Pin Elements - linear animation chain?

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 :).

Avoid duplicated $.offset() call

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).

IE 8 Rotation Broken

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.

Update scrollOffset and scrollDuration on the fly?

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?

iOS scrolling using fixed window

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.

First pined element make a jump

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.

multiple classes

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"

SUPERSCROLLRAMA...animate back after scrolling for a fixed height?

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

did pin's break?

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 )

Pinned DIV with 3d transform doesn't work in FF

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

Cannot place 2 animations on a page??

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!!!

Slow Down Scroll

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.

Adding a method to destroy superscrollorama.

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

Thanks

Pin elements with position absolute

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

Issue with pin-spacer during scroll up

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.

Jump to IDs with pinned elements before

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.

Publish a new version

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.

one-off triggers

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.

Anchor Links On Load

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?

Major Bug: Tween to wrong values when scrolling up

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!