First Post: How to animate divs based on animation-name property

[Jayanth]

I have a few divs which have animation-name property. I also have the object that defines the keyframes for that animation-name. How do I animate these divs using greensock? 

See the Pen mdVbNmO by cjayanth95 (@cjayanth95) on CodePen

[Shaun Gorneau]

Best bet would be to create a CodePen to illustrate what you are doing and what you are asking.

 

 

[Jayanth]

Thank you. I've added the codepen now. So basically, I use draft JS editor in react (https://draftjs.org/) to generate the html. Using draft js, I can apply inline styles to span elements. That's how I add the 'animation-property' to individual span elements. Now if I just define the keyframes inside the CSS, it starts animating. How do I achieve something like this using gsap so that I can control the animation. 

29 minutes ago, Shaun Gorneau said:

Best bet would be to create a CodePen to illustrate what you are doing and what you are asking.

 

 

 

[Shaun Gorneau]

59 minutes ago, Jayanth said:

Thank you. I've added the codepen now. So basically, I use draft JS editor in react (https://draftjs.org/) to generate the html. Using draft js, I can apply inline styles to span elements. That's how I add the 'animation-property' to individual span elements. Now if I just define the keyframes inside the CSS, it starts animating. How do I achieve something like this using gsap so that I can control the animation. 

 

 

While I don't see a CodePen link in your previous post, (I see the CodePen in your original post ... didn't check there before I typed my response) I believe what you are asking is how can you generate a tween using element properties (in this case inline styles).

 

The quick answer is, you won't be using inline styles. You can use data attributes to do something similar ... but I wouldn't. Not unless you know which specific attributes you want to tween and it's consistent across your tweened elements. For example

 

See the Pen oNbvKyx by sgorneau (@sgorneau) on CodePen

 

Or, perhaps, passing in a full properties object, like

 

See the Pen oNbNvNB?editors=0010 by sgorneau (@sgorneau) on CodePen

 

You would also want to think about whether you want these to automatically be appended to a timeline (as I did in my Pen), or whether they should be standalone tweens ... and how you would denote that.

 

All in all, you're much better off defining the tween properties in Javascript alone, like this

 

See the Pen oNbNvzw?editors=0010 by sgorneau (@sgorneau) on CodePen