scroll-animations | creating scroll animations on single page layouts | Animation library

It appears to me the fadeInLeft class is being added on scroll as expected. You do, however, need an additional closing curly brace and closing parentheses to close your document ready event handler:

I recreated the codepen embed here using the settings you used: https://codepen.io/ksmessy/pen/EmrBdV

On the Embed pen button, when using the "Use click to load" default state check box (see below)

...it just generates a screenshot of your pen and hosts it on Codepen's Amazon Web Services account (example: http://s3-us-west-2.amazonaws.com/i.cdpn.io/603854.xqeQva.ff9bf8bc-b13e-4285-9dd9-218ff376997c.png), and puts that image as a background placeholder until the "Run Pen" button is clicked.

So it looks like whatever service is taking the screenshot, doesn't support transform: rotate(45deg); - it needs to be prefixed.

I made a new pen here, with prefixes added in:

https://codepen.io/ksmessy/pen/oWmKwp (I just did it the easy way - pen Settings, CSS, Vendor Prefixing, check the "Autoprefixer" checkbox)

I embedded it here, and the arrow looks normal:

https://codepen.io/ksmessy/pen/bWzXry

In summary: add a prefix to transform: rotate.