Jump to content
Search Community

Abstraction help

KeithMartell test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

    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!

Link to comment
Share on other sites

  • Solution

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);

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...