animation loop jump

[Arcmedia]

HI, I'm not sure I'm in th eright place but any way..
I have been working on this animation for a few days now and cannot understand why the transition between the last animation and the first has a jump since the transition between the others are fine, ill explain.

I have an array of objects which contain a word and an image.. I have an animation on the text that heighlights the text, the text then disappears and the next word from the next object in the array gets typed out, while this is happening i have a fade in/out animation on the images.

It all works fine except for when we get the the last object in the array and the loop starts again, the tranition from the last object to the first again is not smooth and seems like the animation does not get completed on the last itiration.. CAN YOU HELP PLEASE, I've spent too much time on this already
 

/** ===========================================
	Header animation  
	============================================ **/ 

	// Array of words and images to me animated
	var textImageArray = [{ 
	  'word': 'E-Business',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_featured/2019-02/Kundin-wird-beraten.jpg'
	},{ 
	  'word': 'dedication',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Administration-Buchhalterin-Arcmedia.jpg'
	},
	{
	  'word': 'passion',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Support-Arcmedia.jpg'
	},
	{
	  'word': 'quality',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Geschaeftsleitung-Arcmedia.jpg'
	},
	{
	  'word': 'progress',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Arcmedia-Consulting.jpg'
	},
	{
	  'word': 'commitment',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Marketing-Arcmedia-CSO.jpg'
	},
	{
	  'word': 'service',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Administration-Developer.jpg'
	},
	{
	  'word': 'clarity',
	  'url': 'https://arcmedia.ch/sites/default/files/styles/arcmedia_image_style/public/page_gallery/2019-02/Designerinnen.jpg'
	}]

//definition of master time line with constant repeat (repeat:-1) and a initial delay of 2 seconds (repeatDelay:2)
	var master = new TimelineMax({repeat:-1, repeatDelay:0});

	//INvoks master time line wiht 2 sub time lines added: the textAnimation time line and the imgAnimation time line
	master.add( textAnimation(), 0).add( imgAnimation(), 0);

	// imgAnimation time line and variables
	function imgAnimation() {
		var tL = new TimelineMax(),
		image = $('#changeImage img'),
		animatedImageStyles = {filter:'blur(20px)', opacity:'0', delay: 2.01},
		showImageStyles = {filter:'blur(0)', opacity:'1', delay: 1},
		initialImageStyles = {filter:'blur(0)', opacity:'1'};
		for (i = 0; i < textImageArray.length; i++){
			  tL.to(image, .1, animatedImageStyles)
			  .set(image, {attr:{src:textImageArray[i].url}, filter: 'blur(20px)'})
			  .to(image, 1.1, showImageStyles)
		} 
	    return tL;
	}

	// textAnimation time line and variables
	function textAnimation() {
		var tL = new TimelineMax(),
		text = $('#animateText'),
		animatedTextStyles = {fontFamily: 'GT-Walsheim-Medium', backgroundColor:'#3EA550', color:'#fff'},
		defaultTextStyles = {fontFamily: 'GT-Walsheim-Light', backgroundColor:'transparent', color:'#000', marginRight: '0', text: "", delay: 2};
		for (i = 0; i < textImageArray.length; i++){
			tL.to(text, .1, animatedTextStyles)
			  .to(text, .01, defaultTextStyles)
			  .to(text, 1, {color:'#000', text: textImageArray[i].word, delay:1})
			  .to(text, .1, animatedTextStyles)
		}
		return tL; 
	}

 

See the Pen mgravr by barryPren (@barryPren) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Definitely helpful, however a few things:

 

1. Please don't paste GSAP source code in the JS panel. Especially for the bonus plugins. We provide CodePen-safe urls for all the bonus plugins here: https://greensock.com/try-plugins. For loading GSAP and some CodePen basics see: 
2. Try to reduce your demo as much as possible. For instance we don't need the nav or hundreds of lines of css. If there is a problem with repeating an animation we only need the timeline to have 2 or 3 items. It just makes it easier to spot the problem and less time to watch.

I reduced your demo a bit and focused only on the text part as that seemed to have the most obvious issue.

I think the biggest problem was that your page started out with e-business in the DOM so when the timeline repeated you always saw that text fully visible before it went away and then animated in. 

 

I simplified the demo a bit so hopefully its clear to see what is happening. 

 

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

 

notable changes:

 

• removed text that will be animated from the DOM.
• I gave the master timeline an initial delay so that on page load you have some time to read the sentence before the animation starts
• I took the delay out of your config object for defaultText styles and used a position parameter instead on the animation of the typing text effect. FWIW i strongly recommend using the position-parameter instead of delays in timelines.
• i added a 2-second dummy tween to give people some time to read the text before it goes away

Hopefully this is enough to get you in the right direction and make whatever changes you need to the images.

 

FWIW I don't think having separate functions to build the images animation and text animation is the best as if you make considerable timing changes to the text you will have to do the same thing in the images function. Probably better to just build all the animations in 1 loop.

 

 

 

[mikel]

Hi @Arcmedia

 

Welcome to the GreenSock Forum.

 

The hints from CARL are top.

So here's just an alternative concept to coordinate images and text.

 

See the Pen oOzrLp by mikeK (@mikeK) on CodePen

 

 

Best regards

Mikel

 

 

[Arcmedia]

Hi Carl, Thanks for your feed back.. I removed the delays from the config object as you requested and now i have it working as I want it.
Thanks for you time and advice. Sorry about the overkill on the codepen demo

Hi Mike, I have seen the example you sent and I have taken note, that method is alot more concise, Thanks.

Thanks for your Help guys, I'm loving this librabry (although I need to improve my JS skills )