Abstraction help

[KeithMartell 1 Likes (Newbie)]

    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!

[GreenSock 18,256 Likes (Superhero)]

There's definitely one big problem: you're making one of the common ScrollTrigger mistakes of NESTING ScrollTriggers inside a timeline. That's logically impossible (the playhead can't be controlled by both the parent timeline and the scrollbar position - they could be going in totally different directions). 

 

So maybe just un-nest them: 

 

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

 

[KeithMartell 1 Likes (Newbie)]

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