Trigger anime.js animation when element enters viewport

I'm trying to run an anime.js when an image or element enters the viewport, but i cant seem to get it working. Im trying it with waypoints.js

This is what I have so far, its the 'this' part im having troubles with i think.

$('img').waypoint(function() {         var CSStransforms = anime({           targets: this,           translateX: 250,           scale: 2,           rotate: '1turn'           });             }, {                 offset: '100%'             }); 

2 Answers

Answers 1

You need to target the elements with this.element instead, Here's a working example:

CodePen Demo

Per your question, you would modify it to the following:

jQuery(document).ready(function(){     $('img').waypoint(function() {         var CSStransforms = anime({             targets: this.element,             translateX: 250,             scale: 2,             rotate: '1turn'         });     }, {             offset: '100%'     }); }); 

Answers 2

You need to change the

targets : this to targets: this.element

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati