kylemichel

Hi all, My site is www.kylemichel.me. I'm looking to pay $50/hr for a GSAP developer to peruse my GSAP code that is not optimized for performance and make general edits as you see fit to help me achieve higher framerates, especially on first load without cache. I've already tried my best to optimize, but I'm not very experienced and need someone more familiar with the platform. Start date would hopefully be today, and end date would be whenever the job is complete. I expect hour by hour updates, no need to record screen/log changes, etc. Please DM me on the forum if interested. Thanks!

@GreenSock Thanks so much for the help. I'm sifting through your recommendations to see what works (btw I am on a mac, using Chrome...). Quick question... As soon as I applied xPercent and yPercent instead of x: and y:, I got this console error: Uncaught TypeError: Cannot create property 'startAt' on string '-=1.9' Any idea why this may be happening? The startAt property worked perfectly before I started using xPercent and yPercent. By the way, the live URL is http://www.kylemichel.me/final/index.html

Hey everyone - so excited to be exploring GSAP recently. I've been working on building a new portfolio and GSAP has unlocked an entirely new world for me... have been a web developer and designer for a while but I have a feeling I'll be in this community for a long time. I have been getting along quite nicely in regards to the learning curves of the various plugins, but I've been running into some performance issues that consistently result in lost frames/stuttering animations. I've cut out different parts of my timelines and narrowed the "problem child" down to translating PNGs. On my current site, everything moves buttery-smooth until I introduce one tween for a project image - I'm creating a slideshow of sorts, and want an image to represent each of my projects in my portfolio. When I translate my project images (PNGs, usually around 2000x1400 pixels in native size), all of my buttery-smoothness goes to ****. While I first resorted to searching through the forum and finding this seemingly helpful article, it actually didn't help much, as I've tried my best to apply best practices throughout my code and only translate elements using x:, y:, etc. Here's a look at the actual code that I'm having an issue with: function moveIn() { var inTL = new TimelineMax({onComplete: resetFiring}); inTL.staggerFromTo(splitComplete[0].lines,2,{y: '100%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1) .fromTo('.background', .8, {scaleX: 0, ease: myEase}, {scaleX: 1, transformOrigin: '100% 50%', ease: myEase}, "-=1.9") .staggerFromTo(splitComplete[1].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") .staggerFromTo(splitComplete[2].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") /* .to('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9")*/ .staggerFromTo(splitCompleteChars[0].chars, 1, {y:100, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.1, "-=1.9") .staggerFromTo(splitCompleteChars[1].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") .staggerFromTo(splitCompleteChars[2].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") } The above is buttery smooth ^. function moveIn() { var inTL = new TimelineMax({onComplete: resetFiring}); inTL.staggerFromTo(splitComplete[0].lines,2,{y: '100%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1) .fromTo('.background', .8, {scaleX: 0, ease: myEase}, {scaleX: 1, transformOrigin: '100% 50%', ease: myEase}, "-=1.9") .staggerFromTo(splitComplete[1].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") .staggerFromTo(splitComplete[2].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") .to('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9") .staggerFromTo(splitCompleteChars[0].chars, 1, {y:100, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.1, "-=1.9") .staggerFromTo(splitCompleteChars[1].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") .staggerFromTo(splitCompleteChars[2].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") } When I add in the image ^, everything becomes extremely choppy. I'm sorry for not providing a Codepen, as I'm not sure how I could simulate the environment in which I'm experiencing the issue without just sharing my site-in-progress. Is there something I can do to fix the performance that I missed? Smaller image, different image format, no image at all, different tweens? Thanks so much Any and all help would be appreciated... I have relied on this community heavily for my development thus far and figured it was time to speak up.