Search the Community

Hi, I have an infinite rotator which has click events on icons. I have a problem on devices. On scroll something's wrong, it appears that I have a refresh for timeline. Is this about debouncing? Thanks!

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); } }