Jump to content
Search Community

Replacing Existing RAF with GSAP

James Feeney test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an SVG layer that animates using GSAP and this works fine using TimelineMax.

 

I'd like to also control this layer using motion detection from a webcam using this JavaScript:

 

https://benjaminhorn.io/code/motion-detection-with-javascript-and-a-web-camera/

 

My problem is I'm having some weird delays due to having the motion js using RequestAnimationFrame instead of GSAP.

 

I've grabbed the x y from the movement attributes, but I don't know how to convert the RAF rendering to GSAP.

 

Can anyone help me out or point me in the right direction?

Link to comment
Share on other sites

Hello James Feeney, Welcome to the GreenSock Forum!

 

GSAP uses RAF (RequestAnimationFrame) as well.

 

You could look into using the GSAP lagSmoothing() method:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/static_lagSmoothing/

 

 

But maybe others could have some other advice.

 

Also a codepen example could be nice so we can test and edit your code live.

 

 

:)

  • Like 2
Link to comment
Share on other sites

Wow! That's really cool, and surprisingly simple.

 

I would just get rid of the rAF in the code, and make the render method public so you can use GSAP's ticker.

// Create the motion detector
var core = new MotionDetector.Core();

// Then add the render method to GSAP's ticker
TweenLite.ticker.addEventListener("tick", core.render.bind(core));
  • Like 3
Link to comment
Share on other sites

I'm still to properly integrate it, yet just by looking at it you've helped me a bundle. Thanks a lot!  :D 

When I work on it again next week, I'll update this thread with any findings.

Now it's just a case of walking around in front of my webcam #gottalovemotiondetection

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