Jarryd

Greetings... I have an animation that runs on load which makes my spaceman float up and down. When he gets hidden and returned that animation has been killed. Below are the 2 conflicting animations which both involve x & y. I have looked at overwrites but can't seem to get my head around it. I would like the spaceman animation to run indefinitely so whenever he is visible he is "hovering" var spaceman = new gsap.timeline({ }); spaceman.fromTo('.spaceman', { x: 0, y: 0 } , { x: -2, y: -5, ease: Power0.easeNone, duration: 1, repeat: -1, yoyo: true, overwrite: 'true' }, 2 ); function fader(elementName, x, y) { var tl = new gsap.timeline({}); if (x == 'out') { if (y == 'left') { tl.to(elementName, { x: -150, y: -30, rotation: -15, scaleX: 0.1, scaleY: 0.1, opacity: 0, duration: 2.5, transformOrigin: "top left", ease: "power4.out" }); } else { tl.to(elementName, { x: 150, y: -30, rotation: 15, scaleX: 0.1, scaleY: 0.1, opacity: 0, duration: 2.5, transformOrigin: "top right", ease: "power4.out" }); } } else { if (y == 'right') { tl.to(elementName, { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1, duration: 1, transformOrigin: "top right", ease: "power4.out", overwrite: 'auto' }); }else { tl.to(elementName, { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1, duration: 1, transformOrigin: "top left", ease: "power4.out", overwrite: 'auto' }); } } }