Keep animation running indefinitely

[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' });

            }

        }

    }

 

[GreenSock]

A few quick notes:

1. Don't use "new" like that. 

   // BAD: 
   let tl = new gsap.timeline({});
   
   // GOOD: 
   let tl = gsap.timeline();

2. The overwrite value should either be "auto", true, or false - not the string "true". 

   // BAD
   overwrite: "true"
   
   // GOOD
   overwrite: true

3. I'd strongly recommend moving to the more modern string-based ease syntax: 

   // OLD
   ease: Power0.easeNone
   
   // NEW
   ease: "none"

4. If you're only adding one tween to the timeline, there's no reason to use a timeline (although it'll work just fine). 

   // LONG
   let tl = gsap.timeline();
   tl.fromTo(...);
             
   // SHORT
   gsap.fromTo(...);

5. You'll have a SIGNIFICANTLY better chance of getting a good answer here if you take the time to create a minimal demo (like a CodePen). Like in your case, I don't really understand the context and I can't see anything being overwritten. I'm left to guess by glancing at a small excerpt of code.

If my assumptions are correct, you're trying to call fader() on the ".spaceman" too? Thus you've got an infinitely-repeating x/y tween and you're ALSO trying to have fader() animate it to completely different x/y values simultaneously? That's a logic issue in your code. You could pause() your spaceman animation in that case until the new animation is done and then restart it. There are many ways you could approach this, actually. Here's one: 

let spaceman = gsap.fromTo('.spaceman', { x: 0, y: 0 } , { x: -2, y: -5, ease: "sine.inOut", duration: 1, repeat: -1, yoyo: true });

function fader(elementName, x, y) {
	let vars;
	if (x === 'out') {
		vars = { x: -150, y: -30, rotation: -15, scaleX: 0.1, scaleY: 0.1, opacity: 0, duration: 2.5, transformOrigin: (y === "left") ? "top left" : "top right", ease: "power4.out" };
	} else {
		vars = { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1, duration: 1, transformOrigin: (y === "right") ? "top right" : "top left", ease: "power4.out" };
	}
	if (elementName === ".spaceman") {
		spaceman.pause();
		vars.onComplete = () => spaceman.restart();
	}
	return gsap.to(elementName, vars);
}

If you still need some help, please provide a minimal demo in CodePen or something and we'd be happy to answer any GSAP-specific questions.