CustomWiggle loop little break issue

[stefanopeschiera]

Hi everyone! I try to loop a CustomWiggle animation here the link https://theverso.webflow.io/

After 5-6 loops there's a little stop. How I can avoid it?

 

Here's the JS:

 

var mySplitText = new SplitText(".c-preloader_text", {type:"chars,words, lines"}),
    tl = new TimelineLite();

CustomWiggle.create("myWiggle", {wiggles:10, type:"uniform"});

        
//tl.staggerFrom(mySplitText.chars, 3, {x:800}, 0.02);
tl.staggerFrom(mySplitText.chars, 5, {y:15, repeat: -1, ease:"myWiggle"}, 0.05, 0)

 

Thank you so much! 🙂

[GreenSock]

That's just because the wiggle ease itself isn't set up to seamlessly loop like that - the slope at the very end isn't identical to the beginning. But I actually think you could simplify things quite a bit by just doing a standard yoyo tween with an ease of sine.inOut: 

See the Pen c5f8f3bb393286141ff69115b4b401b6?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Code:

let split = SplitText.create(".word", {type: "chars,words"});

gsap.from(split.chars, {
  y: 30,
  duration: 0.5,
  ease: "sine.inOut",
  stagger: {
    each: 0.05,
    repeat: -1,
    yoyo: true
  }
});

Is that what you were looking for? 

[stefanopeschiera]

Yes! Thank you so much 🤓