Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'requestanimationframe'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 7 results

  1. 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 t
  2. 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
  3. 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: currentMousePo
  4. 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 f
  5. 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
  6. 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 ) requestAnima
  7. 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?