unable to change text size #1

Syedwaheed · 2018-03-08T13:44:37Z

Thanks for this great feature. i m unable to change the font size of the text. Even though i have added all the css and header tag but still size remains the same. Following is the way how i m doing it:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
  <script>var ml = { timelines: {}};</script>
   <style>.moving-letters {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 550px;
  }</style>
</head>
<body>
<div class="page" id="p1">
                     <li class="icon fa fa-home "><span class="title">Welcome To</span>
                     <div  class="moving-letters">
    <h1 class="ml1">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span id = "demo" class="letters">Example</span>
    <span class="line line2"></span>
  </span>
</h1>
                 </div></li>   
                  </div>
<script>
// Wrap every letter in a span
$('.ml1 .letters').each(function(){
  $(this).html($(this).text().replace(/([^\x00\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
ml.timelines["ml1"] = anime.timeline({loop: true})
  .add({
    targets: '.ml1 .letter',
    scale: [0.3,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 600,
    delay: function(el, i) {
      return 70 * (i+1)
    }
  }).add({
    targets: '.ml1 .line',
    scaleX: [0,1],
    opacity: [0.5,1],
    easing: "easeOutExpo",
    duration: 700,
    offset: '-=875',
    delay: function(el, i, l) {
      return 80 * (l - i);
    }
  }).add({
    targets: '.ml1',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
	   
</script>
        <style>
.ml1 {
  font-weight: 900!important;
  font-size: 3.5em!important;
}
.ml1 .letter {
  display: inline-block;
  line-height: 1em;
}
.ml1 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}
.ml1 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #fff;
  transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
			 
</style>
</body>

And here is the out put:

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

unable to change text size #1

unable to change text size #1

Syedwaheed commented Mar 8, 2018 •

edited

Loading

unable to change text size #1

unable to change text size #1

Comments

Syedwaheed commented Mar 8, 2018 • edited Loading

Syedwaheed commented Mar 8, 2018 •

edited

Loading