How to chain this all together

[JoeH]

Hi,

 

I have 2 timelines which play after one another, but then at the end of the 2nd timeline I want to enable a hover effect so that the 2nd timeline reverses and plays based on a mouse hover event.

 

I have the hover effect working on it's own but it just jumps from the start of the timeline to the end when I chain everything together.

 

Here are my 2 timelines
 

const introAnimation = element => {
  return gsap.timeline({paused: true})
    .to("#logo #part-1", 4, {opacity: 0.2, delay: 2})
    .to("#logo #part-7", 4, {opacity: 0.2}, '-=4')
    .to("#logo #part-3", 4, {opacity: 0.2}, '-=4')
    .to("#logo #part-4", 4, {opacity: 0.2}, '-=4')
    .to("#logo #part-5", 4, {opacity: 0.2}, '-=4')
    .to("#logo #part-6", 4, {opacity: 0.2}, '-=4')
    .to("#logo #part-2", 4, {opacity: 0.2}, '-=4')
    .to("#logo #part-2", 4, {opacity: 0.4})
    .to("#logo #part-2", 8, {rotation: 2000, transformOrigin: "50% 50%", ease: "none"}, '-=8')
    .to("#logo #part-1", 4, {x: 0, y: 0, rotation: 0, opacity: 1})
    .to("#logo #part-7", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
    .to("#logo #part-3", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
    .to("#logo #part-4", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
    .to("#logo #part-5", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
    .to("#logo #part-6", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
    .to("#logo #part-2", 4, {x: 0, y: 0, rotation: 0, opacity: 0.2}, '-=4')
    .to("#logo #part-2", 3, {opacity: 1}, '-=2')
    .to("#tv li", 0.95, {transform: "scaleY(1)", transformOrigin: "bottom right", ease: "expo.inOut"})
    .set("#logo-wrapping", {width: '40%'}, '-=0.2')
    .set("#page", {backgroundColor: 'rgb(15, 59, 65)', delay: 1}, '-=0.2')
    .to("#tv li", 0.95, {transform: "scaleY(0)", transformOrigin: "bottom right", ease: "expo.inOut"}, '-=0.20')
};

const logoAnimation = element => {
  return gsap.timeline({paused: true})
    .to("#logo #part-4", {x: -5, y: 0, rotation: -6, duration: 2})
    .to("#logo #part-3", {x: 8, y: -8, rotation: 8, duration: 2}, '-=2')
    .to("#logo #part-2", {x: -2, y: 8, duration: 2}, '-=2')
    .to("#logo #part-1", {x: 2, y: -8, rotation: -10, duration: 2}, '-=2')
    .to("#logo #part-5", {x: 3, y: 4, rotation: -14, duration: 2}, '-=2')
    .to("#logo #part-7", {x: 10, y: -1, rotation: 4, duration: 2}, '-=2')
    .to("#logo #part-6", {x: 13, y: 3, rotation: -5, duration: 2}, '-=2')
    .set('#logo-wrapping', {css: {pointerEvents:"all"}});
};

 

And then below these is my master timeline, as well as my hover event.

 

$(function () {

  const master = gsap.timeline();
  var logoA = logoAnimation();
  var introA = introAnimation();

  master
     .add(introA.play())
     .add(logoA.play());

  $('#logo-wrapping').hover(function() {
    logoA.play();
  }, function () {
    logoA.reverse();
  });

});

I'm probably doing something fundamentally wrong, but I couldn't find much information online about linking up timelines together, or maybe my javascript skills are not that great yet!

[JoeH]

Ok so I think the problem is that the timeline being played through the master timeline is separate from the one I try to play through my hover function. I'm not skilled enough yet to understand why.

 

If I remove the .add(logoA.play()); from the master timeline it then works apart from I need to trigger the animation by creating a mouseOut event.

 

 

[JoeH]

Got this working as such

 

$(function () {

  const master = gsap.timeline();
  const logoA = timelines.logo();
  const introA = timelines.intro();

  master
    .add(introA.play())
    .add(function () {
    	// play animation initially.
      	logoA.play();
      	// Add hover event listener.
        $('#logo-wrapping').hover(function() {
          logoA.reverse();
        }, function () {
          logoA.play();
        });

    });
});

 

[ZachSaucier]

Hey Joe, I'm glad you got it figured out.

 

A side note, I think you'd really like GSAP 3's defaults functionality. It can save you a good bit of typing in your timelines above. To use it with the duration, include duration in the vars parameter instead of its own parameter.