[Morph SVG Animation Jitter]

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