Fade out text with data attributes being passed

[xaykogeki]

Hi all,

I want to do a fadeIn-fadeOut effect which is similar to this GreenSock Codepen Sample 

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

. The difference is that I need to push data from the HTML so I thought of using data attributes. However, I have three scenarios I am encountering.

• Scenario 1 - As seen from my codepen below, the very first entry doesn't get cycled through because there's no data attribute. it does show on page load.
• Scenario 2 - If I do have a data attribute, it will display `first heading` twice. One on page load, and the next due to the animation.
• Scenario 3 - I could have everything as a data attribute and leave the content of `p` empty, but the problem is on page load the `subtext` will be empty because the animation will start to run with the duration of 1. It would look empty on page load.

 

This could might as well be a logic issue as well so there might be a workaround. The final outcome I am hoping is similar to the original codepen, but I can pass data through the attributes without duplication.  Any advice is appreciated!

See the Pen abKGypa by relozoboi (@relozoboi) on CodePen

[GreenSock]

This is a fundamental logic problem with doing seamless loops - if you want the first one to show up initially with full opacity, but everything else fades in/out and then at the end, that first one fades in before looping all the way back around, you need to build it like that. An alternative (at least in this case) is to just build it normally, including the initial fade in of the first element, but seek() the timeline immediately to the spot where that is full opacity. That way, when it loops, it's all seamless. 

 

Also, did you realize that you're literally animating ALL of the .subtext elements every time? I assume you just wanted that one primary/visible one to animate, so you should just target that one. Here's one option for you: 

 

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

 

I hope that helps.

[xaykogeki]

Thanks so much! I think this should work and I shall test it on my main project.
And with the animation, yeah I just noticed it last minute haha. Thanks for pointing it out as well. Learning quite a lot 

[GreenSock]

No problem! Happy to help. 

 

Have fun!