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
https://codepen.io/antizhyk/pen/WNKXgbe
And I repeat that the essence of the problem is to make repeated letters to scroll.
Help me please.
