JQuery - Problema al animar elementos al aparecer en pantalla (se animan todos a la vez) – sin plugins

Buen día, les agradecía si me colaboran con saber como hago para solucionar que con unos elementos que quiero animar al aparecer en pantalla en base a una clase, no se me animen todos los elementos a la vez como si fuesen un mismo elemento (la animación consiste simplemente en pasar de un “opacity: 0;” a un “opacity: 1;”) - es decir, lo que sucede es que al aparecer en pantalla el 1er elemento que tiene la clase con el “opacity: 0;” (el 1ro de los elementos que jquery les va a asignar la clase con el “opacity: 1;”) el resto que tienen dicha clase también se animan antes de aparecer en pantalla, es decir jqery también les asigna la clase con el “opacity: 1;” antes de llegar a estar en pantalla; para hacerme entender mejor les comparto en codepen el código; o si conocen un mejor método de lograr lo que necesito sin plugins me ayudarían mucho, de nuevo muchas gracias. http://codepen.io/EdwingGit/pen/RRRgZq

Hola Edwin, he revisado el código al que haces referencia, y no me queda claro exactamente cual es el problema, o que tendría que hacer que no hace... nos puedes comentar con mas detalle?

En tu caso la animación se basa en la clase por lo que todos los textos que tenga esa clase tendrán esa animación.

Prueba a hacerlo por id y poner un id a cada uno de los párrafos que quieras que tengan la animación.

Si, tienes razón , hasta ahora la única manera que veo que puede hacer que se anime a cada elemento por separado es dándoles un id a cada uno diferente e incluirlos en el script... muchas gracias

Hola, la idea era que cada elemento con la clase que tiene "opasity: 0;" apareciera lentamente con una animación que se generaría jqery cuando el elemento en cuestión este en la pantalla al hacer scroll, jquery le asignaría otra clase con "opasity: 1;" en ese momento de aparecer en la pantalla al hacer scroll, pero el problema es que cuando aparece el 1er elemento en pantalla hace que jquery no solo a dicho elemento le de la nueva clase con "opasity: 1;" sino a todos los elementos sin esperar a que estén en pantalla, cosa que hace que cuando salgan no se ve la animación que simula un fadeIn, , hasta ahora la única manera que veo que puede hacer que se anime a cada elemento por separado es dándoles un id a cada uno diferente e incluirlos en el script.... jaja ojalá me hiciera entender mejor.... igual muchas gracias

repito, hazlo por id.
cuando vayas a cambiar a opacity: 1
primero comprueba que el elemento sea con el id que quieres y después haz la animación así no haces la animación sobre todos los elementos.

OK... así lo haré, muchas gracias