Rotation on textfields. Working only in IE

[Math]

Hi,

 

This codepen works in IE but not Chrome or Firefox.

 

Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working.

 

Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike...

 

Tested on:

Windows 10,

IE: 11.0.10240

FF:  41.0.1

Chrome: 45.0.2454.101 m

 

Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts.

 

I hope anyone can help out.

 

Kind regards,

Math

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

[Diaco]

Hi Math 

 

pls add this to your css :

span{ display:block; }

[Math]

seems to work..in codepen at least... gonna test it in Lectora asap...

 

Thx Diaco...

[Math]

Top Diaco. Works perfect both in Chrome as in FF.

Thx very much.

Working a lot with GSAP ( my favourite tweening library ) in Lectora.

Some of the stuff i shared on the Trivantis ( developer of Lectora ) community you find here:

  http://community.trivantis.com/  

Most things i shared there use GSAP.
Working on a few new ones ( one of those i encountered this ) now..

 

Regards,

Math