[animating state change in react]

I need some react animation help.

 

I got the startinganimation working (and I see that there is a react transition group thing I could use.

 

But what I'm trying to do is coordinate a state change with an animation, along with a bonus that if I have two items updating at the same time to animate them at the same time.

 

I can write the non-react version of what I'm trying to accomplish if that helps with context.

See the Pen OJRjZeN by willenglishiv (@willenglishiv) on CodePen

[svg path animation horizontal]

Oh yeah, curious as to what the div example would be? The reason I went svg is because I want to be able to style it without redoing the animation.

[svg path animation horizontal]

So see the above referenced codepen:

 

I wanted to animate the horizontal lines (smaller to bigger) but doing width also shrinks down the height of the svg and I'm trying to prevent that.

 

As a bonus (because I'm sure once the one liner comes out to do this) I also need to be able to do it in the reverse direction (left to right and right to left)

See the Pen YzyJbre by willenglishiv (@willenglishiv) on CodePen

[how to update tween inside of TimelineMax]

hello again,

 

I'm trying to do a marquee (scrolling text), a pen is attached.

 

I need to account for changes in text size if the information is updated (this is part of a stream overlay) so I'm trying to figure out what the best way to do it is.

 

I'm using TimelineMax (I know I need to update to GSAP3, maybe post this project) but I was curious as to can I use updateTo on a specific tween inside of timeliine?  The current error says updateTo is not a function.

See the Pen jObrdjN by willenglishiv (@willenglishiv) on CodePen

[How to create a simple image rotator]

does your example use GSAP3? My project is still using 2.

[How to create a simple image rotator]

added codepen.

[How to create a simple image rotator]

my googlefu isn't strong here:

 

I'm just trying to do something simple where I just have an image rotate out at an interval, infinitely.

I have seen the 'make an array out of elements, setInterval and then TweenMax AutoAlpha' but I was wondering if there was an easier way.  Most solutions were written in 2013, not sure if they are relevant now.

 

Apologize if this has been answered before.

See the Pen pojJBgm by willenglishiv (@willenglishiv) on CodePen