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 )

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; }