Skip to content

Right way of pinning blocks? Bumping in Chrome? #156

Closed
elegos opened this Issue Feb 19, 2014 · 4 comments

3 participants

@elegos
elegos commented Feb 19, 2014

Hello!

I'm having a hard time trying to make this wonderful library work for me... my idea is to slice an image into 6 sections and to pin them one after another (i.e. pin section, do animations, unpin, pin second section etc).

I'm using a div containing various divs with background images (rapresenting the various parts of a big image as website background).

It works "fine" with Firefox (see after), but in Chrome it will return the scroll to 0 (in any case it will let the scroll "bounce").

I'd like to concatenate pins (pin one section, do animations, unpin, pin the second etc). I've turned out I had to nest "containers" containing all elements, all emenents but the first, all elements but the first 2 etc. Is this behaviour the normal one, or can I proceed differently? I have to pin the element and keep the others in the same position relative to the one pinned (see code above).

With my current solution, if I scroll very fast in Firefox, it will scramble everything.

How can I fix these problem?

HTML part

<div id="animation-main" class="container">
    <div id="animation-part1">
        <div class="part part1">
            <!-- animation part 1, slide 1 -->
            <div id="annaffiatoio"></div>
            <div class="bee bee-small"></div>
            <div class="bee bee-big"></div>
            <div class="bee bee-small"></div>

            <div class="drop" id="drop"></div>
            <div class="drop" id="drop1"></div>
            <div class="drop" id="drop2"></div>
        </div>
        <div id="animation-part2">
            <div class="part part2">
                <!-- animation part 2, slide 2 -->
            </div>
            <div id="animation-part3">
                <div class="part part3">
                    <!-- animation part 3, slide 3 -->
                </div>
                <div id="animation-part4">
                    <div class="part part4">
                        <!-- animation part 4, slide 4 -->
                    </div>
                    <div id="animation-part5">
                        <div class="part part5">
                            <!-- animation part 5, slide 5 -->
                        </div>
                        <div class="part part6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript part:

controller.pin($('#animation-part1'), 2400, {
    anim: (new TimelineLite())
        .append([
            TweenMax.fromTo($("#annaffiatoio"), 800, {css: {rotation: 0}, immediateRender: true}, {css:{rotation: -55}})
        ]).append([
            TweenMax.fromTo($(".drop"), 800, {css: {opacity: 0}, immediateRender: true}, {css: {opacity: 1}}),
            TweenMax.to($(".drop"), 800, {css: {top: 350}}),

            TweenMax.to($("#drop"), 800, {css: {left: '45%'}}),
            TweenMax.to($("#drop"), 800, {css: {rotation: 45}}),

            TweenMax.to($("#drop1"), 800, {css: {left: '50%'}}),

            TweenMax.to($("#drop2"), 800, {css: {left: '55%'}}),
            TweenMax.to($("#drop2"), 800, {css: {rotation: -45}})
        ]).append([
            TweenMax.to($(".drop"), 800, {css: {top: 450}}),
            TweenMax.to($(".drop"), 800, {css: {opacity: 0}})
        ]),
    onUnpin: function () {
        controller.pin($('#animation-part2'), 2400, {
            anim: (new TimelineLite()),
            onUnpin: function () {
                controller.pin($('#animation-part3', 2400, {
                    anim: (new TimelineLite()),
                    onUnpin: function () {
                        controller.pin($('#animation-part4'), 2400, {
                            anim: (new TimelineLite())
                        })
                    }
                }))
            }
        });
    },
    pushFollowers: true
});

Website on which I'm working on: http://dev.back-forth.com/triphylla/

Thanks

@janpaepke janpaepke added the question label Feb 21, 2014
@janpaepke janpaepke self-assigned this Feb 21, 2014
@janpaepke
Collaborator

Hi @elegos,

I'm having a really hard time understanding what it is you are trying to achieve and so obviously I cant even start to think about what the problem might be.
Is it possible for you to create a simplified version of your desired outcome with as little markup as possible.
For example instead of images and all that just have 3 divs with different background colours and try to achieve the same effect.
I often realized that the process of creating a simplified demo helped me to figure out what the problem might be in my own code.
And if you still can't find it yourself it's a lot easier for me to help you.

So can you do that? Maybe even just as a jsfiddle?

regards,
Jan

@elegos
elegos commented Feb 23, 2014

Hello @janpaepke,

I simply tried to pin an absolute-positioned DIV nearly at the start of the DOM. This produced (on Chrome for Windows) an odd behavior which resets the scroll position back (not sure if at scroll position 0 or at the beginning of the original position of the pinned element). I then tried to pin an element inside of it (disabling the pinning of the first element) with the option not to push followers and it worked OK. A friend of mine told me that this bug wasn't present on Chrome for OSX, and it's not present on Firefox.

I've now replaced the contents of the page with a parallax effect for the terrain. While on my laptop it works perfectly (with the touchpad), on my desktop (with scrolling wheel), the parallax effect bumps instead of being fluid. Is there anything I can do in order to avoid this behavior?

Thanks

@jkrot
jkrot commented Feb 23, 2014
@janpaepke
Collaborator

Hi Guys,

I'm closing all bug issues for Superscrollorama because it has been superceeded by ScrollMagic.
https://github.com/janpaepke/ScrollMagic

Please check if updating helps fix your problem.
If not, please post a new issue in the ScrollMagic issue section.

best regards,
Jan

@janpaepke janpaepke closed this Feb 28, 2014
@janpaepke janpaepke added the bug label Feb 28, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.