Jump to content
GreenSock

Search the Community

Showing results for tags 'requestanimationframe'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 5 results

  1. Hi everybody, for now, I'm using the requestAnimationFrame function. Is this way the most optimized way ? It looks like this way use a lot of the browser ressources. Thank you var currentMousePos = { x: 0, y: 0 }, mousePos = { x : 0}, myvar; document.addEventListener("mousemove", function(event){ currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); function raf() { my_raf = requestAnimationFrame(raf); mouse.x = myvar; TweenMax.to(mousePos, 0.3, { x: currentMousePos.x, onUpdate: function () { myvar = mousePos.x; }, ease: Linear.easeNone }); }
  2. Hello everyone, I'm about to implement some debouncing mechanisms into my website and was wondering what was the best approach to take. I've seen this snippet by @OSUblake: var requestId = null; window.addEventListener("resize", function() { if (!requestId) { requestId = requestAnimationFrame(update); } }); function update() { // run your update requestId = null; } Which is a (beautiful) GSAP-independent implementation of requestAnimationFrame. Considering GSAP uses rAF internally, is there a way to leverage this? (edit: removed awful faulty code) I feel like if there was a way, it would make it easier to subsequently use that tween, or at the very least generate new ones like it, while modifying some things like the delay between each update call etc. *edit* to be clear, I understand the code above would be for throttling, not debouncing. I'm thinking about both and focusing on the former for now. Here is the latest version of what I came up with! function stipple(f, ...args) { const opts = {}, tw = new TweenLite({}, 0.2, { onComplete: end, paused: true }); let isStarting = true, lastArgs; setOptions(args.length === 1 ? args[0] : {}); function dot(...thisArgs) { lastArgs = thisArgs; if ( isStarting ) { isStarting = false; if ( opts.leading ) { run(); } tw.restart(true, true); } else if ( !opts.throttle ) { tw.restart(true, true); } } function end() { isStarting = true; if ( !opts.leading ) { run(); } } function run() { opts.func.forEach(f => { new TweenLite({}, 0, { onComplete: f, onCompleteParams: opts.params || lastArgs || [] }); }); } Object.defineProperties(dot, { tween: { get: () => { return tw; }}, options: { get: () => { return opts; }, set: v => { setOptions(v); }}, func: { get: () => { return opts.func; }, set: v => { opts.func = makeArray(v); }}, params: { get: () => { return opts.params; }, set: v => { opts.params = v ? makeArray(v) : null; }}, throttle: { get: () => { return opts.throttle; }, set: v => { opts.throttle = v; }}, leading: { get: () => { return opts.leading; }, set: v => { opts.leading = v; }}, delay: { get: () => { return opts.delay; }, set: v => { v = Math.max(v, 0.001); if ( !isNaN(v) && v !== opts.delay ) { tw.duration(v); opts.delay = v; } }} }); return dot; function makeArray(e) { return Array.isArray(e) ? e : [e]; } function setOptions(obj) { opts.func = makeArray(obj.func || opts.func || f); opts.delay = Math.max(obj.delay || opts.delay || ( typeof args[0] === 'number' ? args[0] : 0.2 ), 0.001); opts.params = obj.params || opts.params || args[1]; opts.params = opts.params ? makeArray(opts.params) : null; opts.throttle = obj.throttle || opts.throttle || args[2] || false; opts.leading = obj.leading || opts.leading || args[3] || false; tw.duration(opts.delay); } }
  3. For some reason when I use from or staggerFrom with requestAnimationFrame, the animation jumps and actually acts as if it's doing a "To" tween. When I use the code outside of my requestAnimationFrame, it works fine. Why is this? I need to use within a requestAnimationFrame because I trigger the tween when scroll is at a certain position and I need requestAnimationFrame to determine that position (I was advised that's the correct way to do it instead of attaching to scroll). Here's my tween: TweenMax.staggerFrom(".box", 1, { x:100, autoAlpha: .5}, .5); I made a quick codepen demonstrating this issue. Thanks, Yan
  4. Hi, I'm trying to use GSAP to animate objects in a ThreeJS project, within the requestAnimationFrame loop. Obviously this loop is firing much faster than the time it takes each tween to complete. I'm getting lots of overlapping Tweens on each object and I'm trying to figure out the best way to have each Tween run and then run it's onComplete function to tween itself back properly without losing it's references. Would TimelineLite be better suited for this or is there a better approach using TweenLite? Thanks in advance! function animate() { if(animation === true ) requestAnimationFrame( animate ); TweenLite.killTweensOf(object); TweenLite.to(object, 0.5, { x: _radius * Math.cos( num ), y: _radius * Math.sin( num ), ease: Expo.easeOut, onComplete: function(_this,_x,_y) { // animate the object properties back to what they were before we started this tween }, onCompleteParams: ["{self}",object.position.x,object.position.y] }); }
  5. Hello. I'd like to be able to turn requestAnimationFrame on and off for a number of elements that use it. Some of those elements aren't Tweens. Rather than specifically turning it on or off, I'd rather have control over the function that runs as a result of the requestAnimationFrame inside of TweenLite via a method like tick(). Psudocode var tween = TweenLite.to(element, 1, {width:"50%"}); var running = true; tween.override(); function renderTween(){ if(!running){ return false }; requestAnimFrame(renderTween); tween.tick(); } renderTween(); Anyone have any ideas? Thanks, Aaron
×