jQuery script isn't working.

I'm trying to replicate this timeline on a WordPress site:


I'm not able to get the blocks to fade in as I scroll:


I'm probably doing something really dumb. ;)
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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.

Athar SyedCommented:
You are missing the modernizr.js script. add the below line and you should be good.

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

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
You can remove class names " .cssanimations " from all blocks of css. That is preventing from animation...actually that container is not there in page.

for example:
.cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;

will be now:
.cd-timeline-img.is-hidden {
    visibility: hidden;
Julian HansenCommented:
The CSS uses .cssanimations to apply various styles. In the code pen sample the cssanimations class is added to the <html> element - although this is not immediately apparent unless you look at the underlying source of the code.

So long story short - I suspect if you add the cssanimations class to a parent of your .cd-timeline-block blocks it may just fix the problem.
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

athar13 is right!
Julian HansenCommented:
You can remove class names " .cssanimations " from all blocks of css. That is preventing from animation...actually that container is not there in page.
To avoid any unpleasant side effects I would suggest rather ADDING the cssanimations class to a parent element rather than removing it from the CSS.
Julian HansenCommented:
You are missing the modernizr.js script.
Modernizr is just a feature detection library and is not required in modern browsers - it is for older browsers that may not support some of the new HTML5/CSS3 functions.  It has no bearing on the problem being experienced.
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
This was indeed the issue. It's the Modernizr.js that is adding the classes and probably much more!

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.