Multiple ScrollTriggers and MotionPaths on the same element

[cbravo]

I am hoping to get an opinion on a technique I am using on a project where I am trying to animate an object down the page as the user scrolls down. The circle element is in a fixed div that takes up the entire viewport and just moves around inside that div while the rest of the site is scrolled.  (see image below)

I am breaking up each part of the animation into their own gsap tweens like so 

    // Animate to heading2
	gsap.to('#circle', {
      motionPath: {
        path: (...curvy path to target),
      },
      scrollTrigger: {
        trigger: '#heading2',
        start: 'top bottom',
        end: 'center 80%',
        scrub: true,
      },
    })

	// animate upwards at the same rate as scrolling
	gsap.to('#circle', {
      immediateRender: false,
	  y: window.height * 0.2,
      scrollTrigger: {
        trigger: '#heading2',
        start: 'center 80%-=1px',
        end: 'center 20%',
        scrub: true,
      },
    })

    // once you reach the 20% from the top of the screen 
    // animate towards heading3
    // finish when heading3 is at 70% of the screen height.
	gsap.to('#circle', {
      immediateRender: false,
      ease: 'none',
      motionPath: {
        path: (...curvy path to target),
      },
      scrollTrigger: {
        trigger: '#heading2',
        endTrigger: '#heading3',
        start: 'center 20%-=1px',
        end: 'center 70%',
        scrub: true,
      },
    })

 

I am seeing major memory issues on the site and animations chugging like crazy and I am wondering if this technique is the cause of the performance issues. Does anyone have any thoughts or a better way to accomplish this? 

 

Codepen:  https://codesandbox.io/s/shy-darkness-4mxjp

 

 

 

Image Steps: 
1. animate circle on curved path towards 'heading2'

2. animate circle upwards with 'heading2' as the user scrolls down so that the circle appears behind 'heading2' as it moves up the page.

3. Once the circle reaches to 20% mark of the top of the page animate it towards heading3

 

See the Pen by s (@s) on CodePen

[GreenSock]

Yeah, it's pretty tough to troubleshoot blind. Once you provide that CodePen, we may have some insight to share. But if you're saying memory is the problem, the only thing I can think of is the actual path itself - MotionPathPlugin does a bunch of work up front to parse the path and create a lookup table for data points on the path so that it can be super-fast while animating. If your path has anchor points super close together, it may just cause there to be a lot of data in that cache (the quantity is based on the shortest distance between two points). That's all I can think of at this point. 

[cbravo]

@GreenSock I am not sure why  but I am having trouble adding the codepen using the normal method so ill just paste it directly here and in my original post.  https://codesandbox.io/s/shy-darkness-4mxjp It seems like it runs okay at first but as I am moving it around the performance gets worse and worse.

[GreenSock]

There are many hundreds of lines of code in various files which makes it very difficult to troubleshoot efficiently. From my cursory glance, though, this looks unrelated to GSAP. When I ran a performance snapshot in Chrome, I saw MASSIVE hits on the rasterizer thread which means it's about graphics rendering in the browser, not JavaScript/GSAP execution. 

 

Is there something in particular that made you think it's a GSAP issue? 

 

If you still need some help, please provide a reduced test case with only the absolutely essential code for reproducing the problem.