CODEWITHSUNDEEP
javascripthtmlcss
Kilroy
Kilroy

Reputation: 33

How do I get a DIV to follow a transform

Long story short, I'm trying to put text inside a box that is animated with javascript. 

var two = new Two({
  fullscreen: true,
  autostart: true
}).appendTo(document.body);
const card = two.makeRoundedRectangle(230/2, two.height/2, 230, 130, 10);



const div = document.createElement("div"); 										// THIS IS THE IMPORTANT STUFF
const text = document.createTextNode("This is text.");				//
div.appendChild(text);																				// THIS IS THE IMPORTANT STUFF

two.update(); // this needs to be here to add to the dom 

card._renderer.elem.style.cssText = 'position:relative;width:230px;height:130px;'; 			// THIS IS THE IMPORTANT STUFF
div.style.cssText = 'position:absolute;width:200px;height:200px;';											// 
card._renderer.elem.appendChild(div); 																									// THIS IS THE IMPORTANT STUFF

two.bind('update', function (framNum)
{
	card.translation.x += 1
	if (card.translation.x > two.width - 230/2)
	{
	card.translation.x = 230/2
	}
	
}).play()
<script src="https://two.js.org/third-party/two.js"></script>

here's what I've tried. I'm trying to put document.createTextNode("This is text."); inside a parent that is moving

I was expecting the to see the text, or even a div with the inspector, but its not highlighting.

Any help would be greatly appreciated

Upvotes: 0

Views: 68

Answers (1)

Lee Taylor
Lee Taylor

Reputation: 7994

You need to use two's text functionality instead of using DOM related functions. It appears that in this context, two renders to an SVG format, thus adding HTML tags won't work.

var two = new Two({fullscreen: true, autostart: true}).appendTo(document.body);
const card = two.makeRoundedRectangle(230/2, two.height/2, 230, 130, 10);

var styles = { size: 24, family: 'Calibri' }; 
var text = new Two.Text("This is text.", 120, 100, styles);

var group = two.makeGroup(card, text);

two.update(); // this needs to be here to add to the dom 

card._renderer.elem.style.cssText = 'position:relative;width:230px;height:130px;'; 		

two.bind('update', function (framNum)
{
	group.translation.x += 1
	if (group.translation.x > two.width - 230/2)
	{
	group.translation.x = 230/2
	}
	
}).play()
<script src="https://two.js.org/third-party/two.js"></script>

Upvotes: 1

Related Questions