Question: Animations Are Firing too Early in the Page

[lisacowanyr]

Hi John,

I have an animation posted at:

http://dev.digital-module.com/lisa/

It's kind of a mess right now, but if you look at the prop plane and the balloons, you'll get the gist of the problem I'm having. The prop plane works as I want it to. The balloons, however, fire too early. They shouldn't start rising until the user reaches that frame (around 4000 pixels), but all but the last 2 are already done when you get to that screen. triggerAtCenter is set to false.

I'm a noob at javascript, but I've done a lot of reading about GSAP. I think I kinda sorta understand how all of this works. Any guidance you can provide is greatly appreciated.

Thanks,
Lisa

[johnpolacek]

There's an offset property you can use in superscrollorama to tweak when
the animation happens.

controller.addTween('#fade',
TweenMax.from($('#fade'),.5,{
css:{opacity:0}}),
0, // scroll duration of tween (0 means autoplay)
200); // offset the start of the tween by 200 pixels

On Sun, Feb 2, 2014 at 10:17 AM, lisacowanyr notifications@github.comwrote:

Hi John,

I have an animation posted at:

http://dev.digital-module.com/lisa/

It's kind of a mess right now, but if you look at the prop plane and the
balloons, you'll get the gist of the problem I'm having. The prop plane
works as I want it to. The balloons, however, fire too early. They
shouldn't start rising until the user reaches that frame (around 4000
pixels), but all but the last 2 are already done when you get to that
screen. triggerAtCenter is set to false.

I'm a noob at javascript, but I've done a lot of reading about GSAP. I
think I kinda sorta understand how all of this works. Any guidance you can
provide is greatly appreciated.

Thanks,
Lisa

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

Follow me on Twitter: http://twitter.com/johnpolacek
http://twitter.com/johnpolacek

[lisacowanyr]

Thanks for the quick response.

If I rewrite the animations like this:

$(function ($) {
controller = $.superscrollorama();

    controller.addTween(100, TweenMax.to($('#balloon_red'), .5, {
            bottom:36
        }), 4900);
    controller.addTween(500, TweenMax.to($('#balloon_orange'), .5, {
            bottom:115
        }), 5000);
    controller.addTween(900, TweenMax.to($('#balloon_teal'), .5, {
            bottom:224
        }), 4900);
    controller.addTween(1300, TweenMax.to($('#balloon_gray'), .5, {
            bottom:51
        }), 5000);
    controller.addTween(2000, TweenMax.to($('#balloon_green'), .3, {
            bottom:150
        }), 4400);

});

And set the offsets to fire in the middle of the frame, they fire at about the right time. I think I'm on the right track now.

Lisa

[lisacowanyr]

Sorry, I do have 1 more question, and it is a noob question. In the first line,

controller.addTween(100, TweenMax.to($('#balloon_red'), .5, {
bottom:36
}), 4900);

What does the 100 stand for? I don't understand that from my reading.

Thank you very much for your patience.

Lisa

[janpaepke]

Hi Lisa,

the 100 is the start position of the tween.
This can either be another Element or a scroll offset value.

regards,
Jan

[lisacowanyr]

Thanks!

Lisa

From: Jan Paepke <notifications@github.commailto:notifications@github.com>
Reply-To: johnpolacek/superscrollorama <reply@reply.github.commailto:reply@reply.github.com>
Date: Monday, February 3, 2014 at 11:17 AM
To: johnpolacek/superscrollorama <superscrollorama@noreply.github.commailto:superscrollorama@noreply.github.com>
Cc: Lisa Cowan <lisa.cowan@yr.commailto:lisa.cowan@yr.com>
Subject: Re: [superscrollorama] Question: Animations Are Firing too Early in the Page (#144)

Hi Lisa,

the 100 is the start position of the tween.
This can either be another Element or a scroll offset value.

regards,
Jan

Reply to this email directly or view it on GitHubhttps://github.com//issues/144#issuecomment-33977022.