Highlighted

Text animation is upside down in explorer

Contributor ,
Apr 09, 2019

Copy link to clipboard

Copied

Hi all,

For some reason some animated text is showing up upside down in Explorer. This is my custom code block inside of iON Interactive so please ignore the crazy code.

It's in the yellow midway down the page. Any ideas? This is a new one for me .

Premier | ProvideGx

Screen Shot 2019-04-09 at 12.29.17 PM.png

Views

772

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Text animation is upside down in explorer

Contributor ,
Apr 09, 2019

Copy link to clipboard

Copied

Hi all,

For some reason some animated text is showing up upside down in Explorer. This is my custom code block inside of iON Interactive so please ignore the crazy code.

It's in the yellow midway down the page. Any ideas? This is a new one for me .

Premier | ProvideGx

Screen Shot 2019-04-09 at 12.29.17 PM.png

Views

773

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 09, 2019 0
Adobe Community Professional ,
Apr 09, 2019

Copy link to clipboard

Copied

Who or what  created the animation?

Does the animation work in a plain vanilla layout without any other CSS or scripts?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0
Contributor ,
Apr 09, 2019

Copy link to clipboard

Copied

I customized an animation from codepen. From what I have found since posting this is an IE11 issue only. For some reason it doesn't like the transform fuction.

This is a thread I was just reading.

javascript - CSS transform rotate not working in internet explorer 11 - Stack Overflow

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0
Contributor ,
Apr 09, 2019

Copy link to clipboard

Copied

This is the full code: Some of the CSS may be irrelevant. I deleted other animation examples from the html.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

 

  <style>

    html {

      height: 100%;

    }

    body {

     

      padding: 0;

      text-align: center;

      font-family: 'Roboto Slab', serif;

      position: relative;

      margin: 0;

      height: 100%;

    }

   

    .wrapper {

    height: auto !important;

    height: 100%;

    margin: 0 auto;

    overflow: hidden;

    }

   

    a {

      text-decoration: none;

    }

   

   

    h1, h2 {

      width: 100%;

      float: left;

    }

    h1 {

      margin-top: 100px;

      color: #555;

      margin-bottom: 5px;

    }

   

   

   

  

    .rotatecontainer {

      float: left;

      width: 100%;

      margin: 0 auto;

    }

   

    .rotatecontainer h1 {

      padding:80px 50px;

      float: left;

      width: 100%;

      font-size: 55px;

      box-sizing: border-box;

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      font-weight: 100;

      color: white;

      margin: 0;

    }

   

    .rotatecontainer .demo4 {

      background: #ffc627;

line-height:.5;

    }

   

   .rotating {

  display: inline-block;

  -webkit-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);

  -moz-transform: rotateX(0) rotateY(0) rotateZ(0);

  -ms-transform: rotateX(0) rotateY(0) rotateZ(0);

  -o-transform: rotateX(0) rotateY(0) rotateZ(0);

  transform: rotateX(0) rotateY(0) rotateZ(0);

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  -o-transition: 0.5s;

  transition: 0.5s;

  -webkit-transform-origin-x: 50%;

}

.rotating.flip {

  position: relative;

}

.rotating .front, .rotating .back {

  left: 0;

  top: 0;

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -ms-backface-visibility: hidden;

  -o-backface-visibility: hidden;

  backface-visibility: hidden;

}

.rotating .front {

  position: absolute;

  display: inline-block;

  -webkit-transform: translate3d(0,0,1px);

  -moz-transform: translate3d(0,0,1px);

  -ms-transform: translate3d(0,0,1px);

  -o-transform: translate3d(0,0,1px);

  transform: translate3d(0,0,1px);

}

.rotating.flip .front {

  z-index: 1;

}

.rotating .back {

  display: block;

  opacity: 0;

}

.rotating.spin {

  -webkit-transform: rotate(360deg) scale(0);

  -moz-transform: rotate(360deg) scale(0);

  -ms-transform: rotate(360deg) scale(0);

  -o-transform: rotate(360deg) scale(0);

  transform: rotate(360deg) scale(0);

}

.rotating.flip .back {

  z-index: 2;

  display: block;

  opacity: 1;

 

  -webkit-transform: rotateY(180deg) translate3d(0,0,0);

  -moz-transform: rotateY(180deg) translate3d(0,0,0);

  -ms-transform: rotateY(180deg) translate3d(0,0,0);

  -o-transform: rotateY(180deg) translate3d(0,0,0);

  transform: rotateY(180deg) translate3d(0,0,0);

}

.rotating.flip.up .back {

  -webkit-transform: rotateX(180deg) translate3d(0,0,0);

  -moz-transform: rotateX(180deg) translate3d(0,0,0);

  -ms-transform: rotateX(180deg) translate3d(0,0,0);

  -o-transform: rotateX(180deg) translate3d(0,0,0);

  transform: rotateX(180deg) translate3d(0,0,0);

}

.rotating.flip.cube .front {

  -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);

  -moz-transform: translate3d(0,0,100px) scale(0.85,0.85);

  -ms-transform: translate3d(0,0,100px) scale(0.85,0.85);

  -o-transform: translate3d(0,0,100px) scale(0.85,0.85);

  transform: translate3d(0,0,100px) scale(0.85,0.85);

}

.rotating.flip.cube .back {

  -webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9);

  -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

  -ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

  -o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

  transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

}

.rotating.flip.cube.up .back {

  -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);

  -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

  -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

  -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

  transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

}

   

</style>

<script>

  $(document).ready(function(){

      $(".demo4 .rotate").textrotator({

        animation: "flipUp",

        speed: 1750

      });

});

</script>

<script>

/* ===========================================================

* jquery-simple-text-rotator.js v1

* ===========================================================

* Copyright 2013 Pete Rojwongsuriya.

* http://www.thepetedesign.com

*

* A very simple and light weight jQuery plugin that

* allows you to rotate multiple text without changing

* the layout

* https://github.com/peachananr/simple-text-rotator

*

* ========================================================== */

!function($){

 

  var defaults = {

animation: "dissolve",

separator: ",",

speed: 2000

};

$.fx.step.textShadowBlur = function(fx) {

    $(fx.elem).prop('textShadowBlur', fx.now).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'});

  };

  $.fn.textrotator = function(options){

    var settings = $.extend({}, defaults, options);

   

    return this.each(function(){

      var el = $(this)

      var array = [];

      $.each(el.text().split(settings.separator), function(key, value) {

        array.push(value);

      });

      el.text(array[0]);

     

      // animation option

      var rotate = function() {

        switch (settings.animation) {

          case 'dissolve':

            el.animate({

              textShadowBlur:20,

              opacity: 0

            }, 500 , function() {

              index = $.inArray(el.text(), array)

              if((index + 1) == array.length) index = -1

              el.text(array[index + 1]).animate({

                textShadowBlur:0,

                opacity: 1

              }, 500 );

            });

          break;

         

          case 'flip':

            if(el.find(".back").length > 0) {

              el.html(el.find(".back").html())

            }

         

            var initial = el.text()

            var index = $.inArray(initial, array)

            if((index + 1) == array.length) index = -1

           

            el.html("");

            $("<span class='front'>" + initial + "</span>").appendTo(el);

            $("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

            el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip").show().css({

              "-webkit-transform": " rotateY(-180deg)",

              "-moz-transform": " rotateY(-180deg)",

              "-o-transform": " rotateY(-180deg)",

              "transform": " rotateY(-180deg)"

            })

           

          break;

         

          case 'flipUp':

            if(el.find(".back").length > 0) {

              el.html(el.find(".back").html())

            }

         

            var initial = el.text()

            var index = $.inArray(initial, array)

            if((index + 1) == array.length) index = -1

           

            el.html("");

            $("<span class='front'>" + initial + "</span>").appendTo(el);

            $("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

            el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip up").show().css({

              "-webkit-transform": " rotateX(-180deg)",

              "-moz-transform": " rotateX(-180deg)",

              "-o-transform": " rotateX(-180deg)",

              "transform": " rotateX(-180deg)"

            })

           

          break;

         

          case 'flipCube':

            if(el.find(".back").length > 0) {

              el.html(el.find(".back").html())

            }

         

            var initial = el.text()

            var index = $.inArray(initial, array)

            if((index + 1) == array.length) index = -1

           

            el.html("");

            $("<span class='front'>" + initial + "</span>").appendTo(el);

            $("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

            el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube").show().css({

              "-webkit-transform": " rotateY(180deg)",

              "-moz-transform": " rotateY(180deg)",

              "-o-transform": " rotateY(180deg)",

              "transform": " rotateY(180deg)"

            })

           

          break;

         

          case 'flipCubeUp':

            if(el.find(".back").length > 0) {

              el.html(el.find(".back").html())

            }

         

            var initial = el.text()

            var index = $.inArray(initial, array)

            if((index + 1) == array.length) index = -1

           

            el.html("");

            $("<span class='front'>" + initial + "</span>").appendTo(el);

            $("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

            el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube up").show().css({

              "-webkit-transform": " rotateX(180deg)",

              "-moz-transform": " rotateX(180deg)",

              "-o-transform": " rotateX(180deg)",

              "transform": " rotateX(180deg)"

            })

           

          break;

         

          case 'spin':

            if(el.find(".rotating").length > 0) {

              el.html(el.find(".rotating").html())

            }

            index = $.inArray(el.text(), array)

            if((index + 1) == array.length) index = -1

           

            el.wrapInner("<span class='rotating spin' />").find(".rotating").hide().text(array[index + 1]).show().css({

              "-webkit-transform": " rotate(0) scale(1)",

              "-moz-transform": "rotate(0) scale(1)",

              "-o-transform": "rotate(0) scale(1)",

              "transform": "rotate(0) scale(1)"

            })

          break;

         

          case 'fade':

            el.fadeOut(settings.speed, function() {

              index = $.inArray(el.text(), array)

              if((index + 1) == array.length) index = -1

              el.text(array[index + 1]).fadeIn(settings.speed);

            });

          break;

        }

      };

      setInterval(rotate, settings.speed);

    });

  }

 

}(window.jQuery);

</script>

</head>

<body>

  <div class="wrapper">

  

   

  <div class="rotatecontainer">

  

    <h1 class="demo4"><span style="font-size:30px;color:#000000;line-height:1;font-family: 'Roboto', sans-serif;font-weight:100;">ProvideGx is guided by an advisory committee which includes 20 health systems:</span><br><br><span style="line-height: 1.25;font-family: 'Roboto Slab', serif;font-weight:400;" class="rotate">Acurity, Adventist Health (Advent FL), Adventist Health (CA), Atrium (Carolinas), Avera Health, Banner Health, Baycare Health System, Baystate Health, Bon Secours MD Anderson, Mercy Health, Fairview Health, Geisinger, McLaren Healthcare, OSF Healthcare, PeaceHealth, Texas Health Resources, UPMC, Yankee Alliance</span> </h1>

    </div>

  </div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0
Adobe Community Professional ,
Apr 09, 2019

Copy link to clipboard

Copied

It works well in the latest browsers... Is there a reason you want to support this for IE? If it's not necessary for that browser, can you disable the transform for that version?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 1
Adobe Community Professional ,
Apr 09, 2019

Copy link to clipboard

Copied

I don't like how the animation works.  It's  kind of jerky and disjointed.  Maybe I'm the only one  noticing it?

I would replace what's there with jQuery.  Less code and better X browser support..

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0
osgood_ LATEST
LEGEND ,
Apr 10, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

I don't like how the animation works.  It's  kind of jerky and disjointed.  Maybe I'm the only one  noticing it?

I would replace what's there with jQuery.  Less code and better X browser support..

I concur. To me the animation looks too jerky and the code is hugley verbose but I think that's because it's some kind of off-the-shelf plugin which probably has a variety of options available. If you want to address all browsers, including IE I would most likely just go for a simple fade in/out approach rather than the fliping effect, which really adds nothing much in my opinion.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 1