Jump to content

Steven Sanborn

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,149 profile views

Steven Sanborn's Achievements

  1. The difference is subtle but if you compare the touch and drag to animation through js the touch is extremely smooth . Yes I dont think this is a gsap issue but rather a limitation on how ios is handling javascript manipulation of scroll positioning. My guess is that the native scrolling animations are running on some threads that are closer to the native ui scroll and scrollLeft exists in html / js land and its one degree farther from the os .
  2. OK so its pretty subtle but when you start doing more animation it does seem to impact more. For me , im looking at iPad 11" on the device. https://codepen.io/stevensanborn/pen/gOXZmKd?editors=1111 when you scroll using touch and release its very smooth and eases with 0 stutter, however if you use gsap scrollTo: there is a slight performance impact if you watch carefully. This does not happen for me on desktop.
  3. yeah i see the same issues here. Native scroll animations work really well.
  4. var obj = {scroll:parseInt(scrollEle.scrollTop)} TweenMax.to(obj,1,{scroll:0,onUpdate:(o)=>{scrollEle.scrollTop=o.scroll},onUpdateParams:[obj],ease:Power2.easeInOut}) Honestly i would not add another plugin for something so simple, or i wish this was rolled into the main libs
  5. As many games and simulations have their own request for animation frame calls that can be core to rendering obj positions frame by frame, it would be nice if I could call GSAP's from our own request frame function. Ideally everything gets a position in a single RAF. For instance I would love to do this: function animate(){ requestAnimationFrame(animate); TweenMax.ticker._tick(true); //call GSAP rfa manually render() } requestAnimationFrame(animate); TweenMax.ticker.setManualRequestAnimation = true; //set a flag somehow //now all tween run off from the user defined RAF TweenMax.to(obj1,1, { x:,y:,z:.... TweenMax.to(obj2,1, { x:,y:,z:.... I do realize there is the ticker event that i can listen to, but I dont want run my entire application based off of GSAP's RAF event. This would mean stop my RAF run tween then turn on my RAF in my own, with multiple tweens. It seems to make sense that GSAP runs off an game animation render loop and not vice versa. Is there a way to do this?
  6. Have not looked in the repo posted here, but in general I stay away from extra weight unless really helpful. I do this: npm install -S gsap then import to React like this import TweenMax from 'gsap' Though you could probably just get it in with a script tag in the header. then to animate that node make sure you setup a ref to your node : <div ref="myDiv"> Animate ME!! </div> once you have a reference you are good to go and use TweenMax as usual. TweenMax.to(this.refs.myDiv,0.5,{opacity:.5}); just be careful not to intermix the state or props driven changes that may conflict with styling used TweenMax