Kutomba Posted August 21, 2020 Share Posted August 21, 2020 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 More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 If you click the play button (what your event listeners are being listening to) you'll see the error: gsap.ticker.addEventListener() is not a function. It should be gsap.ticker.add(). Use the GSAP 3 documentation. Please try to do more debugging and search through the docs before posting 1 1 Link to comment Share on other sites More sharing options...
warkentien2 Posted May 12, 2021 Share Posted May 12, 2021 @ZachSaucier it took me a few hours to find this info. Could someone update the docs? https://greensock.com/docs/v3/Plugins/EaselPlugin Maybe also throw in a `easel: { alpha: 0 }` line in there to replace opacity. I figure most people will start connecting easel + gsap using this tutorialhttps://createjs.com/getting-started/easeljs Thanks! Link to comment Share on other sites More sharing options...
Cassie Posted May 12, 2021 Share Posted May 12, 2021 Would you mind explaining what you think should be in the docs? I'm not seeing the connection between easel and this thread. Apologies if I'm missing something basic. Link to comment Share on other sites More sharing options...
warkentien2 Posted May 12, 2021 Share Posted May 12, 2021 @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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 12, 2021 Share Posted May 12, 2021 Ah! Gotcha. I'll get that updated asap Link to comment Share on other sites More sharing options...
OSUblake Posted May 12, 2021 Share Posted May 12, 2021 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)); 1 Link to comment Share on other sites More sharing options...
warkentien2 Posted May 12, 2021 Share Posted May 12, 2021 @OSUblake Good point, tested it here: gsap.ticker.add(stage.update.bind(stage)); Works. See the Pen MWpKEaP by warkentien2 (@warkentien2) on CodePen 2 Link to comment Share on other sites More sharing options...
OSUblake Posted May 12, 2021 Share Posted May 12, 2021 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 12, 2021 Share Posted May 12, 2021 Sorry about the docs typo. It should be fixed now. And yeah, you could do this too: gsap.ticker.add(() => stage.update()); 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now