[BUG] onScoll function does not recognize svg or its elements as target?

[monolithMktg]

Trying to animate a simple svg with the onScroll function but it seems that the 'enter' and 'leave' debug points collapse to the top of scroll timeline as they do not recognize svg, or its elements (because i even tried with path), as a target?

Example: https://codepen.io/Raging-Vids/pen/pvJaPqO?editors=1100

[juliangarnier]

The x property is a valid SVG property (https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/x#svg), so Anime.js will try to actually animate the x attribute on the SVG. To set CSS transform to an <svg> element, you can use translateX instead of x.

  animate(svg, {
    translateX: 100,
    autoplay: onScroll({
      debug: true,
    })
  })

[monolithMktg]

Thanks, Julian, But I'm still not able to sync it with scroll:

animate(svg, { translateX: 100, autoplay: onScroll({ debug: true, sync: 1, enter: 'top bottom', leave: 'bottom top' }) })

You can see the enter and leave debug sticks of target remain at the top of the scroll timeline.

Updated pen: https://codepen.io/Raging-Vids/pen/pvJaPqO?editors=1100

[juliangarnier]

Ho I think that's a bug, I'm calculating the boundaries of the element with offsetWidth and offsetHeight, and these properties are not supported by SVG elements. You'll need to wrap the SVG element into a div and target the div for now!

[monolithMktg]

Ho I think that's a bug, I'm calculating the boundaries of the element with offsetWidth and offsetHeight, and these properties are not supported by SVG elements. You'll need to wrap the SVG element into a div and target the div for now!

Thanks a lot for the clarification, man. :)