[TimelineMax/attrPlugin not working with React]

Hey Jack - 

 

Thanks for the feedback. I've done a lot of research, and learned a bunch through the process - but the attrPlugin still is not working on my end, all things held equal between the Codepen and the React app itself. Perhaps this is an issue with the node module?

[TimelineMax/attrPlugin not working with React]

One more file - 

See the Pen aWLdva by anon (@anon) on CodePen

 

This is using FindDOMNodes - and I receive no error message - but animation does not work. 

[TimelineMax/attrPlugin not working with React]

Also: My console error code is: 

 

bundle.js:43 Uncaught Cannot tween a null target

[TimelineMax/attrPlugin not working with React]

Thanks for the quick responses! Top of the line support - especially for a non-customer (may become one soon!),

See the Pen EmwjGy by anon (@anon) on CodePen

See the Pen EmwjGy by anon (@anon) on CodePen

See the Pen EmwjGy by anon (@anon) on CodePen

I am not using FindDOMNode to target the refs, but rather locating the SVG elements based on the ID. I didn't know how to bring FindDOMNode into codepen (would love to learn!).

 

It works absolutely fine here, but fails to work in my application.

See the Pen ybzYva by anon (@anon) on CodePen

(stripping out a lot of unnecessary elements). Not working, just a copy paste job.

 

Ultimately, I would like to accomplish two things:

 

1) Get the animations working

2) Use FindDOMNode to target the refs.

 

Let me know of any questions!

 

[TimelineMax/attrPlugin not working with React]

Thanks for the response! How can I go about importing GSAP into Codepen?

[TimelineMax/attrPlugin not working with React]

Hello - I've been working on getting attr: to work with my React app, but to no avail. I am simply trying to translate the location of an object. Using to and manually setting the x and y values works. This might have something to do with the virtual DOM, but not entirely sure. Has anyone else run into this or was successful in making this work?

 

Code for clarity, in componentDidMount():

setTimeout(() => {
  var tl = new TimelineMax()
  const right_arm = findDOMNode(this.refs.right_arm)
  tl.to(right_arm, 2, { attr:{d:"M 286,61 485,61"}}, 1)
}, 2000)

Thanks in advance!