Search the Community

is it possible to control SmoothScroller request animation frame (updates) externally ? I have react app and i need to sychnronyze better SmoothScroller with other animations i have going, and i would like to do smoothscroller animation/position calculation togetehr with my other animation.

I am using gsap as ticker director for pixi js, as per this example https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js I noticed that when ios device is in low power mode fps drops to 30. After some research I believe it is normal behaviour as it is related to requestAnimationFrame throttling, however animations in my app look very very choppy. In vanilla pixi, we have delta exposed to make animations faster i.e. apixiApp.ticker.add((delta) => { container.rotation -= 0.01 * delta; }); Is there something equivalent I could add to gsap's ticker to ensure animations are sped up when fps is throttled? Here is full code of how gsap updates pixi ticker pixiApp.ticker.stop(); gsap.ticker.add(() => { pixiApp.ticker.update(); });

Hello Sir ! I want Some Optimization On my Custom Cursor Example and most importantly i want to remove .hover-active on scroll ( plz suggest some logic in the place where i comment in codepen ) in the best way as calling a function on scroll may create lag or jank

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

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

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

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

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