Jump to content

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


  • Posts

  • Joined

  • Last visited

kirkjg's Achievements


Newbie (1/14)



  1. You all are awesome, I love how much there is to learn just by starting a thread here. I still have some code considerations to make, particularly regarding Blake's advice on delayedCall().. Just wanted to let you know https://www.milwaukeeballet.org is launched. I hope you like it.. enough to put it in the showcase perhaps
  2. staging.mkeballet.org Hello GSAP crew. I've got a site here that does full page xPercent tweens(inspired by the answer to my previous question - thanks Blake), coupled with drawing an SVG path, and a few other things. On mouse wheel, a function called goNext() or goPrev() fires. Within those functions are the individual functions that kick off the parts of the cover transition - drawing the circle forward/backward, transforming the text in and out, and sliding the cover xPercent in and out. Everything is going great, on at least the user facing side, even on retina screens. Except when you make the screen larger than an average laptop. On larger screens, the cover images are of course larger. And when they "clip" in and out, the red circle path chugs as it draws. If you inspect the sources, you'll find the JS file in js/custom/mkeballet.js. I've minified the irrelevant sections, and tried to comment what the relevant hunks do. The goNext() function is where things come together for this example. So in summary, my question is do you see anything about the way I'm organizing/writing my GSAP code that is counter-intuitive, or am I just trying to do too much that jank is inevitable? I've been here https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=en But I'm not that good at memory monitoring yet so I haven't been able to discern anything useful yet. Thank you!
  3. Blake's answer had the best information for these needs. There was a fundamental misunderstanding on our part regarding when and how to invoke a new layer in the GPU, and more importantly, what not to do to layers in the GPU. Also we just assumed that tweening an SVG path would be best because css clip-path isn't well supported and we wanted that clip-reveal effect. But Blake's xPercent trick saved the day.
  4. Thank you all for your responses, I learned something from each and will be making changes accordingly. Blake, I read your in-depth comments on the thread you linked and I will be changing the way I've been doing some things per your recommendations and getting back to y'all by early next week.
  5. visitmexico.bvkdev1.com When the cover image (SVG clip path) is tweened to reveal the next cover image, sometimes there will be jank. This is especially true on high-res devices. On normal-res devices the jank is far less noticable, but still poses a problem. What can I do to reduce jank when tweening image over image? My assumption is there is not much more that can be done, as I'm already making the top layer render as its own layer in the GPU via 3D CSS acceleration, and the items that are tweening over one another are made up of complex image data. Most sites I see that make it to awwwards have solid colors tween over their content before tweening in another image or content section. Can what I'm doing be done with consistent 60fps? If so, what am I not doing? Thank you in advance for any insight. visitmexico.bvkdev1.com