jQuery waypoints trigger

Question

Here's the code : JSFIDDLE

Issue : I want the element to bounceInDown when I scroll over to it which it clearly does. But, you notice that the element is already there for a second and then after it does the animation bounceInDown Is there any solution for this. Also, I'm following this template Halcyon Days BootStrap Template. If you head over to the link and scroll down, you'll see that the "Creative Portfolio Theme" is not there at first but when you scroll over to it, it fadeInLeft Which in my case is not happening. I want to deal with that. Any help will be appreciated!

Answer 1

Your offset value is at 75%, which means the callback won't trigger until it reaches that point in the viewport. Change the offset to 100% and you'll see what you're expecting.

See example.

EDIT

Perhaps you should hide the element before it gets animated, and show it when animation begins. You can do this pretty easily with CSS:

#intro .wp1 {
    opacity: 0;
}

#intro .wp1.animated {
    opacity: 1;
}

Example