Morph SVG Animation Jitter

[RaySun]

Hello Beings of Supreme Tech Wizardry,

 

I've got an issue with some jumping "text" in an animation. The text is actually a union of SVG paths.  The lower text path contains the basic path for the text letters and the upper text path contains the cutouts for the R's. However, there a strange jump in text near the end of the sequence. The flag background animates perfectly. Any ideas to what could be causing this and a fix?

 

Update:
I've found a method that works which repeats a single SVG Morph with yoyo though I'd really like to specify more states to fine tune the animation. Ex:

var hurryTextLowerAnimation = new TimelineMax({
                    repeat: -1,
                    yoyo: true
                }); 

hurryTextLowerAnimation.to("#text-lower-1", 0.5, {
                    ease: SteppedEase.config(3),
                    morphSVG: "#text-lower-3"
                });

Thanks!

 

See the Pen JMagzV by rayjon (@rayjon) on CodePen

[Carl]

Glad you found a fix. Not really sure what you mean by specifying more states, I'm guessing you could draw those states and morph to each one sort of like we do with the hippo demo in the docs: 

See the Pen rOjeRq by GreenSock (@GreenSock) on CodePen

 

 

I noticed also you are using a SteppedEase config value of 1.8, you should use integers.