Jump to content
GreenSock

Jarryd

Keep animation running indefinitely

Go to solution Solved by GreenSock,

Recommended Posts

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

 

Link to comment
Share on other sites

  • Solution

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. 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×