Animations getting stuck in chromium

[adityashankert]

when i am using the following code the animations are getting stuck chromium browser but working fine in firefox

var controller;
    $(document).ready(function() {
        controller = $.superscrollorama({triggerAtCenter: true,
            playoutAnimations: true
        });
        controller.pin($('#anime-div'), 4000, {
                    anim:pinAnimations, 
                    onPin: function() {                     
                        $('#anime-div').css('top','100px');
                    }, 
                    onUnpin: function() {

                    }
                });

The anime-div is 'section'

and i want to know one more thing when i am using the above animation the div is going to the top of page and comming back to 100px but how can i stop it at 100px and start the animation?

[adityashankert]

This issue is already raised #29 i have followed your workaround and it worked. Thanks

[janpaepke]

You're welcome. :)

regards, J

[adityashankert]

Dude i have one more issue i have an same page anchor which will refer to an element which is a part of animation. But that is not working it is creating some wierd issues. Can you tell me how to do this (it should fastforward the anime and should stop at the req element)

[janpaepke]

Dude, here's how I'd approach it: If you want the animation played you need to simulate scrolling instead of the regular behaviour of an anchor (which is jumping to it). So check out: the Greensock Scroll Plugin: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

Then I would replace the default action of any or all anchors with scrolling to it instead of jumping to it. Something like this (untested):

$("a[href^=#]").each(function(e) {
     e.preventDefault();
     var offset = $(this).offset();
     TweenLite.to(window, 2, {scrollTo:{y:offset.top}, ease:Power2.easeOut});
});

Hope this helps! :) have fun, Jan

[adityashankert]

hi Jan, Unfortunatly it is not working. i used the following code

$('#anchorDiv').click(function(e) {
     e.preventDefault();
     var offset = $('#TargetDiv').offset();
     TweenLite.to(window, 2, {scrollTo:{y:offset.top}, ease:Power2.easeOut});
});

i am getting the following error

NS_ERROR_XPC_NOT_ENOUGH_ARGS: Not enough arguments [nsIDOMWindow.scrollTo]

Please help me with this issue .... This is the last task for completion of my project :(

pls help me ASAP.

thanks, aditya

[janpaepke]

try

$('#anchorDiv').click(function(e) {
     e.preventDefault();
     var offset = $('#TargetDiv').offset();
     TweenLite.to(window, 2, {scrollTo:{y:offset.top,x:0}, ease:Power2.easeOut});
});

[adityashankert]

Not working i guess bug with TweenLite :(

[adityashankert]

I finally fixed the issue by using the following code :) This can be done by embedding the following code snippets

1.add label on your timeline

<Timeline_id>.addLabel('label',time);

2.add this onclick event

$(a).click(function(e) {
      e.preventDefault();
      <Timeline_id>.gotoAndPlay(label, false);
      <Timeline_id>.stop();
});

[janpaepke]

All right cool! And you're right it does seem like a bug in TweenMax. Also some googling suggested that it's not an issue for all browsers... Anyway - I'm gonna close this. Glad all worked out for you.

regards, Jan