[GSAP Mobile Optimization]

1 hour ago, Rodrigo said:

Hi,

 

Performance is a deep topic that could require quite some time and a few pages to get around.

 

The reason there isn't some sort of list or guidelines is because every project has it's own particularities and the right approach changes from project to project. For example are you animating a lot of images? Are those images optimized and using the srcset and size, or using the picture tag? Are the images transparent or do they have some shadow? That's just a few pointers just for images. Then you have other elements, SVGs, canvas, etc. As you can see this rabbit hole is a deep one.

 

The only rule of thumb I have personally is to test and start as simple as possible with the animations on small screens in order to improve performance but also save battery. You can have users with more powerful devices but complex animations will drain more battery due to CPU usage. Of course you have to take into account users that don't have powerful devices and mid/low range devices. Also you can't control the number of browser tabs the user will have in the browser and neither how many apps the user has running (even in the background) when it's viewing the site. Again, as you can see a lot of options.

 

Hopefully this helps and of course if you want to chime in with your personal experience in the subject you're more than welcome to share. In this subject we're all teachers and students at the same time.

Happy Tweening!

Yeah I see the potential complexity now! Thats cool glad theres still stuff for everyone to learn and figure out :-)))

If I have any interesting ideas on optimizations will definitely share!

Thanks for the insight 

[GSAP Mobile Optimization]

Hello all! Back at it again hahah

This time I was wondering about optimizing GSAP for mobile. I have been looking through the forums and google to get a sense of performance of GSAP on mobile/slower speed devices and found a lot of interesting pointers but there wasnt a definitive list of guidelines.

From what I can gather, besides using the GSAP matchMedia() function, what are some pointers we should take note when developing for mobile/slower-download speeds?

Off the top of my head I can think about potentially avoiding GSAP animations right off the landing page for a faster first-contentful-paint/time-to-interactive.  Additionally is there a solution whereby on React we do some kind of LazyLoading for GSAP package until it is needed?  Has somebody done lazy loading for GSAP CDN?

Over here in this thread from 2020 and this other one  talks about more/less performant properties to animate like preferring x and y values over top and left. Should we take into consideration the quantity and intensity of GSAP animations (i.e. Less frequent and less complex) for mobile views?

Cheers!

 

[Abstraction help]

You truly are a lifesaver! @GreenSock :-)))
 

[Abstraction help]

    const ctx = gsap.context((self) => {
      gsap.timeline().to('#image--sunflower', {
        yPercent: '+=100',
        scrollTrigger: {
          trigger: '#body__div',
          scrub: 1,
          end: 'top top'
        },
      })
        .to('#image--sunflower', {
          ease: 'linear',
          rotation: 180,
          scrollTrigger: {
            trigger: '#body__div',
            start: 'top top',
            scrub: 0.5,
            pin: true,
          },
        })
        .to('#image--sunflower', {
          yPercent: '+=100',
          immediateRender: false,
          scrollTrigger: {
            trigger: '#body__div',
            start: self => self.previous().end,
            end: '+=100%',
            scrub: 1
          },
        });
    }, main);

Hi all again! Here with a non-technical question, how  can I further abstract this code to reduce the number of lines? (Just wanna write more efficient code :))

Cheers!

[GSAP Markers weird behaviour]

@GreenSock oh wow! thanks for the quick response

I adapted the template and it works now!

Still a little confused as to whats happening and why and why is that the fix, shall go do more reading onto context and uselayouteffect

Appreciate it! My GSAP Hero :)))))))

[GSAP Markers weird behaviour]

Hi all! New to TriggerScroll/GSAP here. I'm facing a weird behaviour with the same exact code on codepen vs my local react app.

Basically  what I am trying to achieve is a simple rotation of the image when the parent  div containing the image comes into viewport. To note, the parent div is part of a list of "divs" which is on one big "position: absolute" div which is on top (z-index: 2) of a "base" div (acting like a background). 

I seem to be able to achieve this effect on codepen, but for some reason on my react app, the start and end markers are pushed all the way to the top of the screen. But if I make changes on the file and hot-reload, the marker jumps to the correct position. But if I were to do a refresh on the browser (instead of hot-reloading), the trigger markers load on the top of the div by default.

I've tried both CDN and npm method for installing, I cannot figure out why this is happening  Did I mess up some order of js bundle loading or something like that?

Cheers in advance

See the Pen OJwrdbM by Keith-Eng (@Keith-Eng) on CodePen