Search the Community

Hi! I can't find the first lagSmoothing demo from this video. I know it's kinda outdated but I still want to play with it in order to understand lagSmoothing better. ?

I've seen various threads and blog posts about using lagSmoothing() to prevent animations pausing when switching screens. Every time I try to implement solutions, I get either ___ is not a function or not a method, or cannot read property ___ of undefined or something to that effect. Here's the base animation: useEffect(() => { const timeline = new TimelineLite(); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); I've tried adding a TweenLite instance, like recommended here and elsewhere useEffect(() => { const timeline = new TimelineLite(); TweenLite.ticker.useRAF(false); TweenLite.lagSmoothing(0); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); I've also tried adding the fn directly to my timeline instance: useEffect(() => { const timeline = new TimelineLite(); timeline.lagSmoothing(0); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); And have also tried with the updated gsap.timeline() syntax from this Stack OVerflow post. Does anyone have an example of how lagsmoothing should be used with a timeline instance?

Hello everyone, I searched the forum and could not find it. Can I use these methods useRAF() and lagSmoothing() on a gsap object. I saw use-cases on tweens and timelines that developers use useRAF() and lagSmoothing(),but i need on gasp object. I am new to GSAP animations, any help is appreciated. The problem is next: When i switch tab my animation stops, and i don't want that. I want to run without drop of frames in that tab. I have created my animation over gsap object like this : this.spinAnimation = gsap.to(".spinner", { rotation: "+=" + this.animationSettings.normalVelocity * 1000, duration: 1000, repeat: -1, ease: "none", });

I am working on a game that has timer that is animating down, it indicates how much time player has left to make their move. Gsap is animating this timer. Issue I am currently facing is that if player goes to a different browser tab gsap seems to stop animating the timer. After some research I believe this is by design and feature responsible for this is "lagSmoothing" I was able to disable this via "gsap.ticker.lagSmoothing(0)". However this disables lag smoothing for my whole app. I was trying to look similar method on "TimelineLite" that I am using for timer animation, but wasn't able to find anything. Hence this question: Can I disable lagSmoothing for single timeline as opposed whole app? Here is an example of how timeline lite is used in my app. import { TimelineLite } from 'gsap' const timeline = new TimelineLite() this.timeline.to(this, { /* animation config*/ })

I found how to add lagSmoothing to tweenlite and max, but I have not been able to find or figure out how to use it with TimelineLite. Where would I add it in this for example? var tl = new TimelineLite(); tl.to(energyImage, 0, {opacity:0}); tl.from(shape, 5, {rotationY:"-=3000", ease:Sine.easeIn}); tl.from(shape, 1, {autoAlpha:0}, "-=4"); Thanks