Jump to content

James Feeney

  • Posts

  • Joined

  • Last visited

About James Feeney

James Feeney's Achievements



  1. I'm still to properly integrate it, yet just by looking at it you've helped me a bundle. Thanks a lot! 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
  2. Thanks for the tip Blake. I've quoted out the rAF and used your example. I'm getting a 'Uncaught TypeError: Cannot read property bind of undefined'. Any ideas why this would be happening?
  3. 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?
  4. Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James