Missing plugin | codepen - what am I doing wrong?

[Sheshadri]

Hello! 
Total Noob here to GSAP (and codepen).

 

I've used the demo codepen and changed the HTML, JS and CSS to match what I'm striving for (which is a variation of Deneb Scrolling content with pinned image https://www.youtube.com/watch?v=e6eK_drgqK8) and:

1. swapped the right and left 
2. adjusted the scroll end so that both the right and end leave viewport (about) same time

So despite me starting with that working codepen or your Demo Code pen (with the Split Text title being animated), I keep running into the Missing plugin? gsap.registerPlugin()".  *WHEN* I do the following:

• Switch from using ScrollTrigger.create() to gasp.to(...)

Here's my offending codepen: 

Missing plugin? gsap.registerPlugin()"

I thought I had to add import gsap from "asap"; but that didn't work either... I also tried the Codepen 2.0 and also switch to cdn instead of unpkg.  Getting more and more con-fus-ed

 

What am I doing wrong please? 

 

BTW: when I keep using ScrollTrigger.create then the .gallery works well.  BUT the .about does not.

See the Pen PwGWjKp by sheshmantha (@sheshmantha) on CodePen.

Edited March 12 by Sheshadri
Could be I'm not using .to properly???

[Rodrigo]

Hi @Sheshadri and welcome to the GSAP Forums!

 

Just a syntax issue, when you use a plugin in a Tween, you need to wrap the config options of the plugin in an object:

// Wrong
gsap.to(".about", {
  scrollTrigger: ".about",
  opacity: 1,
  start: "top 80%",
  end: "bottom 20%",
  // scrub: 1.2,
  toggleActions: "play reverse play reverse",
  markers: true
});
gsap.to(".gallery", {
  scrollTrigger: ".gallery",
  start: "top top",
  // end:"bottom bottom",
  end: () => `bottom bottom-=${detailsEnd.offsetHeight}`,
  pin: ".left",
  markers: true
});

// Right
gsap.to(".about", {
  scrollTrigger: {
    trigger: ".about",
    opacity: 1,
    start: "top 80%",
    end: "bottom 20%",
    // scrub: 1.2,
    toggleActions: "play reverse play reverse",
    markers: true
  },
});
gsap.to(".gallery", {
  scrollTrigger: {
    trigger: ".gallery",
    start: "top top",
    // end:"bottom bottom",
    end: () => `bottom bottom-=${detailsEnd.offsetHeight}`,
    pin: ".left",
    markers: true
  }
});

See how I wrapped the ScrollTrigger config in an object? The warning you're getting in the console is because the GSAP Core file doesn't recognize config options like start, end, pin, markers, etc.

 

This is a fork of your demo that is using the correct syntax:

See the Pen azmpyEB by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Sheshadri]

Thank you very much @Rodrigo !

Also figured out why the opacity of .about wasn't working.  It needed to be outside the scrollTrigger object and as property of the .to method.

 

Imma learning - Thanks🙏🏾🙏🏾