Hey Blake, Thanks so much for taking time to help.
I tried logging and it's not firing at all. I downloaded the Plugin (gsap member zip) here https://greensock.com/docs/v3/Installation
It says that's version 3.8, which is the latest version, right? So it seams the problem isn't with scrollTrigger, but with the onComplete: ... not firing - I wish I could show this on codePen, but there it works fine. Everything else works - the scrollTrigger is pinning, I get extra scroll space with end: "+=2000px" etc. just onComplete is not doing anything
I tested with onStart and that also works as expected.
Is it possible the mistake is in my timeline? it's a fairly long chain with labels (on Codepen this is a lot shorter)
It looks like this:
tl
.from("#all", {autoAlpha: 0})
.to("#all", { opacity: 1} )
.addLabel("sunrise")
.fromTo ('#sun', { opacity: 0, y: 500},{ opacity: 1, y: -800, scale: baseSize, duration: 1, ease: "power3.out"}, "sunrise") // sun rises
.to("#herotext, #arrow", {y: "-100", opacity: 0, duration: 0.5}, "sunrise") // hero text scrolls up
.to("#solar .unit", {opacity: 1, scale: gsap.utils.wrap([baseSize*0.75, baseSize*0.5, baseSize*1.2]), x: gsap.utils.wrap([50, 100, 100]), duration: 0.1}, "sunrise") // placing and scaling solar panels
.from("#solar", {scale: baseSize*0.5, y: 50, x: -100, duration: 1.5}, "sunrise+=0.1") // solar units appear
.to("#solar .unit", {x: gsap.utils.wrap([50, 75, 100]), opacity: 1, duration: 1.5}, "sunrise+=0.25") // solar unitzs individual zoom
.to ("#solar .panel", { opacity: 1, skewX:-40, scaleY: 0.6, x: -50, stagger: 0.1, duration: 3, ease: "back"}, "sunrise+=1") // solar panels turn up ================
.to ("#solar", { scale: baseSize*3, x: 2000, opacity: 0, duration: 1.5 }, "sunrise+=3") // solar panels zoom in and move out of view
.to ("#sun", { opacity: 0, y: -1000, duration: 1 }, "sunrise+=3") // sun vanishes
.addLabel("windrise")
.to("#ground", {opacity: 1, scale: baseSize*1.2, x: -700, duration: 5}, "windrise" ) // start moving
.to("#windmill1 .wheel", { transformOrigin: "50% 50%", rotation:360, duration: 5, repeat: -1, ease:'none', opacity: 1 }, "windrise-=1.5")
.to("#windmill2 .wheel", { transformOrigin: "50% 50%", rotation:360, duration: 4, repeat: -1, ease:'none', opacity: 1 }, "windrise-=1")
.fromTo ('.windmill', { scale: gsap.utils.wrap([baseSize*0.5, baseSize*0.75]), x: gsap.utils.wrap([400, 200]), y: 200 }, { scale: gsap.utils.wrap([baseSize*1.25, baseSize*1]), x: gsap.utils.wrap([100, 100]), y: 0, opacity: 1, duration: 2 }, "windrise-=2") // windmills zoom in
.fromTo ("#clouds", { y: baseSize*900, x: 400, scale: baseSize*0.5, opacity: 0.5}, { y: baseSize*-600, x: -200, scale: baseSize*1.7, duration: 2, opacity: 0}, "windrise-=0.5") // clouds moving through
.to('.windmill', { scale: gsap.utils.wrap([3, 3]), x: gsap.utils.wrap([-2000, -1400]), opacity: 1, duration: 2 }, "windrise+=1.5") // windmills moving out
.to(".raindrop", { rotation: 15, opacity: 1}, "windrise-=1") // raindrop to have an angle
.fromTo("#rain", {x: 2500, y: -800, opacity: 0},{scale: baseSize*1.5, x: baseSize*-2500, y: -200, opacity: 1, duration: 4}, "windrise-=1") // rain moves through
.to("#rain .raindrop line", {y: 900, opacity: 1, duration: 1}, "windrise") // rain falls
//.from ("#biomass", {x: 50, duration: 2}, "windrise+=1") // stuff grows
.to ("#biomass", {scale: baseSize*1, transformOrigin: "50% 100%", y: baseSize*500-500, duration:1, opacity: 1 },"windrise+=1") // stuff grows
.from("#grass", {y: 200, duration: 2}, "windrise+=1") // stuff grows
.from("#flowers", {y: 400, duration: 2.5}, "windrise+=1") // stuff grows
.addLabel("city")
.to(".bioleft", {x: -100, duration: 1.5, opacity: 1, ease: "power2.inOut"}, "city")
.to(".bioright", {x: 200, duration: 1.5, opacity: 1, ease: "power2.inOut"}, "city")
.fromTo("#city", {scale: baseSize*0.75, opacity: 0}, {scale: baseSize*1.25, opacity: 1, duration: 1.5, ease: "power2.inOut"}, "city") // city appears on horizon
}