Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JoeH

How to chain this all together

Recommended Posts

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!

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

    });
});

 

  • Like 1
Link to comment
Share on other sites

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.

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.
×