Jump to content
Search Community

synchronizing animation with video using gsap ticker ?

Kutomba test
Moderator Tag

Recommended Posts

Hi

I am learning how to synchronize animation with video time line here is my solution based on information provided in gsap forums

 

 

const fade = gsap.to(".textbox", {
  opacity: 0,
  duration: 1,
  easing: "linear",
  repeat: -1,
  yoyo: true,
  paused: true
});

const scale = gsap.to(".textbox", {
  scale: 2,
  repeat: -1,
  ease: "circ.in",
  yoyo: true,
  paused: true
});

const split = new SplitText(".textbox", { type: "chars" });
const splitAnim = gsap.from(split.chars, {
  opacity: 0,
  y: 50,
  ease: "back(4)",
  stagger: {
    from: "end",
    each: 0.05,
  },
  immediateRender: false,
  paused: true
});

   
var vid = document.getElementById("myVideo");
      
      console.log('myvideo', vid);
      function Update(){
        fade.progress( vid.currentTime/vid.duration )
      };
      
      vid.onplay = function() {
          console.log('onplay')
          gsap.ticker.addEventListener('tick',Update);
      };
      vid.onpause = function() {
          gsap.ticker.removeEventListener('tick',Update);
      };

$(".button-li").on("click", function () {
  fade.pause(0);
  scale.pause(0);
  splitAnim.pause(0);
  
  const activeData = $(this).attr("data-active");

  switch (activeData) {
    case "default":
      console.log("no animation needed");
      break;
    case "fade":
      console.log("fade animation");
      fade.play();
      break;
    case "scale":
      console.log("scale animation");
      scale.play();
      break;

    case "split":
      console.log("split animation");
      splitAnim.play();
      break;
  }
});

So I started with fade animation so far, but unfortunatelly no errors and its not working, what is wrong here?

 

Thanks

Kutomba

See the Pen JjXbymL by makumba (@makumba) on CodePen

Link to comment
Share on other sites

  • 8 months later...

@Cassie , no problem. Let me explain

The gsap v3 docs for Easel https://greensock.com/docs/v3/Plugins/EaselPlugin
has the following segment:

//setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick
gsap.ticker.addEventListener("tick", stage.update, stage);
stage.update();

If we try to run it, it doesn't work.

Why? The solution is on this other gsap v3 doc page. https://greensock.com/docs/v3/GSAP/gsap.ticker
Which I only found the connection via this post. After googling for a while.

I only asked for a code snippet update to properly reflect v3's notation.
Also, I'm asking on this thread since I didn't find a better place to request documentation updates.

The opacity solution can be ignored. I figure the tintAmount prop on the code snippet does the same.

  • Like 1
Link to comment
Share on other sites

7 minutes ago, warkentien2 said:

has the following segment:


//setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick
gsap.ticker.addEventListener("tick", stage.update, stage);
stage.update();

If we try to run it, it doesn't work.

 

Does this actually work?

gsap.ticker.add(stage.update);

 

Or do you need to bind it?

gsap.ticker.add(stage.update.bind(update));

 

 

  • Like 1
Link to comment
Share on other sites

46 minutes ago, warkentien2 said:

Also, I'm asking on this thread since I didn't find a better place to request documentation updates.

 

In the future, just create a new topic. Sometimes old threads can get overlooked because other people have already responded.

 

  • Like 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.
×
×
  • Create New...