Lisa again. I have 2 timelines that are still firing too early even w/offsets. The animations for #fighter2 should start at 13313 pixels, but they start at approximately 5835 pixels. I've tried 2 writing them w/2 different syntaxes, but I still get the same result. I was hoping you or someone else on the could please take a look.
I've posted my files here:
Right above the offending animation in the js and html files, I added the comment: jan paepke -- firing too early.
Thanks for the help. I know you are busy.
Please don't put rumours about me in the world that I'm firing too early! :o)
I'll have a look later...
it is actually starting at scrolloffset of 0, so right at the beginning of the page.
The reason why is a bit tricky but i figured i'd show you how to find the solution instead of just telling you.
look at your pin in line 118.
the first parameter is the trigger element, the second is the pin duration and are the third the options for the animation etc.
So apparently your pin triggers to early. Why might that be?
(btw. the same error exists with the other pins i've checked.)
Well you're getting warmer...
Try going to your site, opening the console in your browser and then put in this $("#fighters") and hit enter.
Then do the same thing with $("#fighter").
that's exactly the problem. There is no Element with the id "fighers". So maybe you forgot the wrappers in your DOM or something.
Anyway that's why the animation happens too early. It just stats at the scroll position of 0.
Your definition of the duration is correct.
The offset should be a pixel offset in relation to your trigger position.
So if you want the animation to start before the trigger is visible, use a positive offset, if you want to delay the animation use a negative offset.
I hope this helps.