Anyone unsing the .js text animation from T. TRICKS? Need help

Design help Custom code
1

Hey friends,

I´m using the Anime.js tricksText letter animation from Timothy Tricks, with really cool text-animations. You can check them out here
The animation is working fine, but I need to change the initial state of the animation to opacity:0, to be sure, that the text animation is only showing when scrolling in to view and not before.

This is what I tried so far:
.fade-up .letter {opacity: 0;}
But it´s not working: You can check it out here
(By refreshing the browser it´s working because of the browsers cache, but if you open a new tab, you can see that the headline is rendering before starting the animation)

I´m glad for any help

Here is my site Read-Only: LINK (Page: /kalender)
(how to share your site Read-Only link)

2

Move your style to the header tag.

image
image748×832 46.4 KB

3

Hey, thanks for the reply.
I pasted it into the header, but nothing changed.

4

add .tricks {opacity: 0;}

This may cause the text to always hidden.
If that the case you can just change the opacity after “T.Trick” code finish create all the letter element.

5

Yes, now the text is all hidden.
Unfortunately I don´t understand what you mean, to do after that.
Could you maybe paste in the code example you mean? Thank you :blush:
This what I have so far:

head:

<style> .tricks {opacity: 0;} .fade-up .letter {opacity: 0;} .letter {display: inline-block;} .tricksword {white-space: nowrap; }</style>

body:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script>
// © Code by T.RICKS, https://www.tricksdesign.com/
var tricksWord = document.getElementsByClassName("tricks");
for (var i = 0; i < tricksWord.length; i++) {

var wordWrap = tricksWord.item(i);
wordWrap.innerHTML = wordWrap.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="tricksword">$2</span>');
}
var tricksLetter = document.getElementsByClassName("tricksword");
for (var i = 0; i < tricksLetter.length; i++) {

   var letterWrap = tricksLetter.item(i);
   letterWrap.innerHTML = letterWrap.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
}
// Fade Up Animation
var fadeUp = anime.timeline({
  loop: false,
  autoplay: false,
});
fadeUp 
  .add({
    targets: '.fade-up .letter',
    translateY: [100,0],
    translateZ: 0,
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 1400,
    delay: (el, i) => 300 + 30 * i
  });
// Play animation when scrolled into view
$('#header-section').on('inview', function(event, isInView) {
  if (isInView) {
		// Put the play below this line
      fadeUp.play();
  } else {
  }
});
</script>
6

Just add a begin function in your fadeUp animation.
It going to set the opacity to 1 when the animation is about to start.

Let’s see if it work

 fadeUp 
                  .add({
                  targets: '.fade-up .letter',
                  translateY: [100,0],
                  translateZ: 0,
                  opacity: [0,1],
                  easing: "easeOutExpo",
                  duration: 1400,
                  delay: (el, i) => 300 + 30 * i,
                  begin : ()=>{
                        $('.tricks').css('opacity','1')
                  }
                  });
1 Like
7

Thank you very much :)!!! It worked.