New user, looking for help on translating images

[kylemichel]

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.

 

[GreenSock]

1 hour ago, kylemichel said:

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.

 

Welcome, @kylemichel! Very happy to hear you've been favorably impressed thus far. We could always use more folks helping out and learning in the forums

 

It is indeed tough to troubleshoot blind (no codepen) but I'd venture to guess that this has nothing to do with GSAP and everything to do with graphics rendering in the browser and the heavy load you might be putting on it with the large image. Remember, the more pixels that change on each tick, the more work the browser has to do to repaint them. A few thoughts:

1. Try setting CSSPlugin.defaultForce3D = false just to see if that does anything. And then change it to true and see if it makes anything better. If you're on a Mac and you're looking at things in Chrome, there's a Chrome bug that causes 3D transforms to perform poorly (which is the exact OPPOSITE of what should happen because 3D transforms are supposed to promote elements to their own GPU layers). Thanks Chrome!
2. Try a much smaller image just to see if it helps. If so, you know it's the sheer number of pixels that the browser is having to repaint and you can strategize. 
3. Maybe try setting will-change: transform in the CSS on your image element. But be careful: https://greensock.com/will-change. 

Oh, and when you're animating percentage-based transforms, I'd strongly recommend defining them with xPercent and yPercent instead...

//NOT AS GOOD: 
{x:"60%", y:"80%"}

//BETTER:
{xPercent:60, yPercent:80}

 

If you're still having trouble, we'd love to peek at a codepen or even a live site if at all possible. 

 

Happy tweening!

[kylemichel]

@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

[Carl]

Your code at line 307 is incorrect

 

.fromTo('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9")

 

You are using a fromTo but you need from AND to values, something like:

 

.fromTo('.featImg', 1, {x:"-20%"}, {x: "-80%", ease: Power4.easeOut}, "-=1.9")

 

 

Looking through your code it appears you are defining an ease in both the from and to vars. You only need it once, in the to vars.

 

Also there are some awkward position parameters

 

 .to( ".slide" , 1 ,{ width: '100%', height: '100vh', padding: '40px', ease: myEase }, "-+1"); // should be "+=1" or "-=1"

 

In the future, please provide a reduced test case. It will make things much easier for us and you to isolate the problems.

thanks