Problem with TextPlugin with html tag

[gabriele]

Hi!

 

I have a problem with the TextPlugin and timeline animation in which there is a html tag:

 

var tl = new TimelineMax();

tl.to("#target", 1, {text:"<ul><li>much</li><li>much</li></ul>"})

tl.add("s1");

tl.pause()

tl.to("#target", 1, {text:"<ul><li>much</li><li>much</li><li>much</li></ul>"})

tl.add("s2");

tl.pause()

 

 

$('#continue').click(function (e) {

                tl.tweenTo("s2")

            });

 

 $('#previous').click(function (e) {

               tl.tweenTo("s1")

            });

 

The control of "continue" works but for strange reason when the animation goes on "previous" the text of the target loses the html format : <ul><li> etc... are totally ignored.

Please let me know why this is happening.

Thank you.

 

[Dipscom]

Hi gabriele,

 

Could you set a little demo up that showcases the issue you are having? It is very hard to troubleshoot code blind.

 

Thanks!

 

[Jonathan]

Hello gabriele, and Welcome to the GreenSock Forum!

 

Whats happening is you are trying to use the TextPlugin for DOM elements. But the TextPlugin docs state that

 

Tweens the text content of a DOM element, ...

 

So the TextPlugin is only used for the content of DOM elements and not the DOM elements itself. Like in your case of an unordered list DOM HTML markup.

 

That is why the text of the target loses the html format.

 

But like Dipscom advised a codepen demo will be helpful if your still having issues.

 

Resource:

TextPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/TextPlugin/

 

[Carl]

Yup, Jonathan is exactly right. TextPlugin wasn't designed to honor nested tags like li, p, span etc. it is just for the raw text content.

[gabriele]

Hi guys, thank you so much for your support.

This is the codepen:

 

 

See the Pen yVjLPK by anon (@anon) on CodePen

 

Thank you!

Gabriele