Jump to content
GreenSock

Search the Community

Showing results for tags 'debouncing'.

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

Categories

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. 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!
  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); } }
×