Anime: Targets $(this.element).find('.xxx') not working

[davidhellmann]

Hey. I try to use anime instead of gsap but it doesn't work with my Target selector.
Any Idea whats wrong here or is this not supported?

// Dependencies
import $ from 'jquery'
import TweenMax from '../../../../node_modules/gsap/src/uncompressed/TweenMax'
import anime from 'animejs'
import waypoint from './vendor/jquery.waypoints'
import debounce             from './debounce'


// Find Blocks with .sm Element
var sm_blog_triggers = $('.js_waypointTrigger').has('.js_waypointElement');


// Waypoint Init
var waypoints = $(sm_blog_triggers).waypoint({
  handler: function(direction) {

    // debugging
    // console.log(direction, this.element);

    // Check if direction down
    if ( direction === 'down') {

      // Fade In Up Settings
      // TweenMax.staggerTo($(this.element).find('.js_waypointElement'), .5, {
      //  …
      // }, 0.15);

      anime({
        //targets: '.js_waypointElement',
        targets: $(this.element).find('.js_waypointElement'),
        translateX: '0',
        translateY: '0',
        opacity: 1,
        delay: function(el, index) {
          return index * 80;
        },
      })



    }
  },
  offset: '90%'
})
``
`

Thanks for help!

[fangxianzheng]

because $(XXX) is jQuery Object , not DOM Object . You can try
$(this.element).find('.js_waypointElement').get(0)

[davidhellmann]

Thanks man, I'll try it later today.

[juliangarnier]

Yes it is because anime.js doesn't recognise jquery elements.
In your example I think you can simply replace

targets: $(this.element).find('.js_waypointElement')

by

targets: this.element.querySelectorAll('.js_waypointElement')