Animate opacity of dynamically created dom element

[JamesGrubb]

Hello. Im using an onUpdate function to iterate over a an array to create a series of DOM elements. I would like to animate their opacity in and out, but not quite sure how to add animate to each item? Hope that makes sense. I have had a stab with a forEach loop. But pretty sure this is not the right way to go about things. Also the first time the animation runs the element is empty and each loop the animation for iteration is too fast ? Im using Alpine.js

See the Pen jOMdPLq?editors=1010 by limitedunlimited (@limitedunlimited) on CodePen

[ZachSaucier]

Hey James.

 

18 hours ago, JamesGrubb said:

I would like to animate their opacity in and out, but not quite sure how to add animate to each item?

What do you mean "each item"? You only have one DOM element that you're instantly changing the text of. Are you saying you want the same element to fade in and out and when it's faded out you switch the text?

 

18 hours ago, JamesGrubb said:

each loop the animation for iteration is too fast ?

That simply has to do with rounding. It's easier to see if you log the value in the onUpdate. The range 0.0-0.5 is half the size of 0.5-1.5 so you'll get approximately half of the time for your first item than your other items. You could change how you do your snapping/rounding or change to accommodate but I might recommend setting things up with a timeline with different tweens and function calls instead of the single-tween approach that you have now. Once you answer my questions above I can help out with setting that up if you'd like.

[JamesGrubb]

Hi Zach thanks for your help. By 'item' i mean DOM elements created dynamically from the data in the 'data' array. The data.length === 4. There are 4 items and I'm hopping to smoothly transition from 'opacity:0' to 'opacity:1' , pause, then transition to 'opacity:0'. Cycle through each item in the array. I hope that makes sense?

[ZachSaucier]

I would create a new bubble for each item (I don't know alpine.js but in vanilla JS you'd just create the element and append it to the DOM). Then I would add to a timeline to fade in and out each bubble as needed. That way you don't actually need to do any changing of the DOM besides toggling the display when it's necessary to do so and can use a static timeline instead of relying on an onUpdate (the more work you can do beforehand the better).

[JamesGrubb]

Ok thanks. Ill try that approach.

[mikel]

Hey @JamesGrubb,

 

... an alternative suggestion.

 

See the Pen oNzmqeK by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[JamesGrubb]

Oooh. Thank you. I need to get my head around that javascript. I've only ever seen push used when pushing in to an empty array?

[ZachSaucier]

36 minutes ago, JamesGrubb said:

I've only ever seen push used when pushing in to an empty array?

You need to look at more JS then  

[mikel]

 

... ... and push the practice.

 

A learner's advice.

Mikel

[JamesGrubb]

Very good🙂