[Spinning the letters in the word]

Good afternoon again. I solved the problem with the definition of repetitive letters. But I can not set the animation so that it would work differently for the two types of letters. Can you please tell me the way out of this situation.

 

Here is the exact place where I set up the animation: 

// A function that determines if the letters are similar.
const checkLetter = (currentLetter, prevLetter) => {
  return currentLetter.innerHTML === prevLetter.innerHTML
}

// A function that takes an array of letters in the current word and an array of letters from the previous word.
const moveItem = (tl, item, prevWord) => {
  // Below are the callback functions that detect even and odd letters, as well as repeating letters, and set values accordingly.
  const callbackFrom = (index, target, targets) => {
    if(!!prevWord && checkLetter(target, prevWord[index])) {
      return 0
    } else {
      return index % 2 !== 0 ? -50 : 50
    }
    
  }
  const callbackTo = (index, target, targets) => {
     if(!!prevWord && checkLetter(target, prevWord[index])) {
      return 0
    } else {
      return index % 2 !== 0 ?  50 : -50
    }
    
  }

  const callbackDellay = (index, target, targets) => {
    return !!prevWord && checkLetter(target, prevWord[index]) ?  0 : .3
  }
 
 // This is where the timeline animation is set
   tl.from(item, {
     y: callbackFrom,
     ease: "expo.out"
   },"<0.3");
  
   tl.to(item, {
     y: callbackTo,
     stagger: callbackDellay,
     ease: "expo.in"});
}

I'll leave the link to the sandbox here again

 

And I repeat that the essence of the problem is to make repeated letters to scroll.

Help me please.

[Spinning the letters in the word]

Yes, of course. I can write some native js code myself. I'd like to learn about some gsap features that would allow me to set animations to elements in this selective way. 

I'm just getting acquainted with GSAP, don't know much, and might be missing some ready-made solutions that could help me.

It would be strange to write something of my own when there is a ready-made solution already in the library which I plugged into the project.

[Spinning the letters in the word]

Great, thank you, you have helped me a lot. I ended up with this. 

 

 

 

 Is it possible to make the letters that are repeated not to scroll? Something like: 

if(nextLetter === currentLetter){
 //show without animation
}

 

[Spinning the letters in the word]

Good afternoon, could you please tell me if it is possible to do this effect using GSAP?  
And whether it will be cleaner code. Ideally, I would like to do less css and js.

See the Pen WNKXgbe by antizhyk (@antizhyk) on CodePen