Outline color not changing when top hits center

[RoryVB]

Hey everyone,

 

I'm using an outline color to hide the surroundings of a div. Which works great on entrance but fails to revert to its original (transparent) state when top hits center.

Please let me know if any more information needs to be provided.

 

Thanks!

 

Rory

 

I've attached a horrible quality video due to the size limit. 

 

 

Code: 

 

gsap.registerPlugin(ScrollTrigger);
// scolling rows
gsap.to(".cta_image-row-container", {
  scrollTrigger: {
    trigger: "#cta_section",     
    start: "top center",
    end: "center center",
    markers: false,
    scrub: 4,
    // pin: ".main-wrapper",
    pinSpacing: true,
    anticipatePin: 1,
    //toggleActions: "play complete complete complete"
  },
  x: 0,
  y:0,
});

// outline fade in/out
gsap.to("#test-1", {
  scrollTrigger: {
    trigger: "#cta_section",     
    start: "center center",
    end: "top center",
     markers: true,
    pinSpacing: true,
    anticipatePin: 1,
  },
  outlineColor: "rgba(5, 7, 27)",
});

 

[GreenSock]

It's tough to troubleshoot by just looking at an excerpt of the code (a CodePen/Stackblitz would be best), but this looks wrong to me if your goal is to have it play in reverse when you scroll back up: 

gsap.to("#test-1", {
  scrollTrigger: {
    trigger: "#cta_section",     
    start: "center center",
    end: "top center",
    markers: true,
    pinSpacing: true, // <- does nothing, we're not pinning
    anticipatePin: 1, // <- does nothing, we're not pinning
    // since you didn't define scrub, it'll use toggleActions by default
  },
  outlineColor: "rgba(5, 7, 27)",
});

By default toggleActions are set to "play none none none" which just means it plays the animation onEnter. That's it. If you want it to reverse when scrolling backwards, you've gotta tell it to do that. I'm not sure when exactly you want that (onEnterBack or onLeaveBack), but maybe toggleActions: "play none none reverse" is what you want? Or perhaps you do want it to scrub instead? 

 

If you still need some help, it'd be super cool if you could provide a minimal demo (CodePen/CodeSandbox)

[RoryVB]

@GreenSock You're amazing! I knew it was something simple; guess I should go back to watching some tutorials... 😅

Much appreciated.