Spinning the letters in the word

[antizyk]

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

[alig01]

Hey,

 

yes, such effects are easily done with gsap.

 

I gave it a quick try, but I'm not entirely sure if it's the best approach, but it should definitely be sufficient for showing.

 

See the Pen GRByMjg?editors=0010 by alig01 (@alig01) on CodePen

 

For the first approach, you need to be a member of Club Greenstock, which includes the paid plugins.  If you ask me, it's definitely worth the price since you can accomplish so many other animations.  

 

Hope this helps.

[antizyk]

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
}

 

[Cassie]

Yeah, definitely possible but it won't be that simple! You'll have to write some serious custom logic for that.

 

Maybe someone will jump in for the challenge, but it's a little beyond the scope of the help we offer in these forums I'm afraid - just to manage expectations.

[antizyk]

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.

[Cassie]

Sure, that makes sense. But nothing for this I'm afraid. As far as GSAP is concerned those letters are just elements that it's moving around. GSAP doesn't have awareness of what specific letter is in which element. 

[antizyk]

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.