javascript - Trigger anime.js animation when element enters viewport - Stack Overflow

admin管理员组

文章数量:1426347

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%'
            });

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%'
            });

• javascript
• jquery
• animation

Share Improve this question Follow asked Mar 12, 2018 at 19:54 Scott HunterScott Hunter 41511 gold badge77 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

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%'
    });
});

You need to change the

targets : this to targets: this.element

本文标签： javascriptTrigger animejs animation when element enters viewportStack Overflow