fade between two classes, same space

[Sunflair]

I am trying to do a gentle fade between a time stamp and a date stamp (because of space issues).

 

I am failing on it miserably. It seems I can get it to work the way I want only the first time, then it doesn't. I have commented out the tries I have done today, but it chunks on, and fades off, or overlaps and stays.

 

I hope it is clear what I am trying to do. Can you help? I have watched videos and read, but nothing is precisely how I want it to go, and I am finding it hard to map over.

See the Pen PoJVvyQ by sunflair0 (@sunflair0) on CodePen

[GreenSock]

I'm not really sure what effect you're going for timing-wise and it looks like you may have wanted y-movement? But maybe this will help get you going in the right direction: 

See the Pen jOaYEJE by GreenSock (@GreenSock) on CodePen

[GreenSock]

And here's a different approach that just calls the same function at a certain rate: 

See the Pen vYWpEwz?editors=1010 by GreenSock (@GreenSock) on CodePen

 

There are many ways to accomplish it. Do whichever makes the most sense to you. 

[Sunflair]

Thank you. I spent so much time trying to figure this out, and I would have never thought to do it this way.

 

The Y is just me getting the text to lay in the same area. It is because of the way the HTML is

[Sunflair]

So, update if you want to know, I ended up changing the positioning in HTML so that wasn't an issue anymore. 

I learned that if I am going to do a codepen, to include the parts that I don't think are important. 

The gsap was a part of a larger one, and I ended up making two timelines then combining them at the bottom for a master one and that did the trick.

 

I am writing this in case I become a time traveler in the past and need to find out what solution finally worked for me