Small animation issue with jQuery plugin Scrollorama

Hi there,

I've been playing around with the jQuery plugin Scrollorama to add some scrolling animations to my site. In the plugin documentation, unless specified otherwise, most of the animations are triggered once a user is scrolling and the animated item first appears at the bottom of a user's browser (the animation then continues the more you scroll).

However, no matter what I do, all of my animations seem to occur only once the item reaches the top of my browser (which kind of defeats the purpose as you only partially see the animation).

I've set up a quick demo to show what I mean—you can check it out here (the title of Section 2 should begin to move up into its original position as soon as you see it as you are scrolling but it's only doing so once it reaches the top of your screen).

I have no idea why it would be doing this. I know a quick fix would be to add a negative delay but I know by default, it should not be doing what it's doing so I would rather get a better understanding of what I've done wrong. I'm sure there's a simple explanation for it but I've been wracking my brain over it and could use some help. Thanks in advance!
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

To start with you need to correct the error.  <div class "section1" is missing the equal sign.

AdamAuthor Commented:
Thanks @COBOLdinosaur. This was just a quick example I whipped up to demo the issue. In any case, I've corrected the error. But obviously, that's not really the source of the problem...
Well it will come down to pluging in the right values to the script.  I think probably the delay and start properties are the ones to play with.  I don't see anything indicating a support link on the scrollarama site, so like most free jquery stuff you get what you pay for.

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

AdamAuthor Commented:
Thanks @COBOLdinosaur. I realize its possible that it has to do with the properties that I set. I went back and forth between the demo from the plugin and my own site and even having all the same settings, I was experiencing the same issue. So I'm not sure if I'm just overlooking something and was hoping someone could help me troubleshoot the issue.

The fact that its a free plugin really shouldn't have anything to do with my problem. Its a very widely used and popular plugin. Unfortunately, I haven't found anyone who has experienced my same issue so its quite possible that I'm the one doing something wrong. I just wanted another set of eyes to take a look at my code and give me a hand.
If you use Super Scrollorama which is the successor of Scrollorama and also might have more support, here is the solution:

You need to set a trigger like this below:

 controller.addTween('#trigger-div', TweenMax.fromTo( $('#fly-it'), 3, {css:{top: '300px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{top: 0}, ease:Quad.easeInOut}));

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The fact that its a free plugin really shouldn't have anything to do with my problem.

The generally accepted metric is that 80% of the free plugins contain bugs; more than half can have compatibility and conflict issues with other plugins, and around 5% contain malware.

The fact that there is no support link means that getting support becomes a matter of luck finding someone famliar with the specific plugin you are using among the tens of thousands available.  In this case it looks like you are in luck because AccurateDesign appears to know the product.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.