How to Register Plugins In Vue CodePen

[BearAxe 2 Likes (Newbie)]

I'm trying to set up a codepen so I can make a different forum post. Basically, what's happening right now is that the ScrollTrigger plugin isn't getting registered. Seems fairly simple, but I can't google for anything because of SEO linking back to every instance of codepen being mentioned in the forums. Can someone help me figure out how to do this? 

I'm not sure if i need to run an import off the url or something crazy like that but I'm kind of at a loss for what to even try because codepen hides the cdns in the settings menu. I did try referencing them as window keys, but that did not work. 

 

Expected behavior: the background behind each section should change when the user scrolls down the page. 

See the Pen bGjBgzj by skaulox (@skaulox) on CodePen

[GreenSock 18,264 Likes (Superhero)]

It looks to me like the problem has nothing to do with registering the plugin - you just set the scroller incorrectly: 

 

// wrong
scroller: '.panel-container'

The page/body is what's actually scrolling. Your code was telling ScrollTrigger to watch ".panel-container" for scrolling events and that the scroll positions should all be relative to that scroller...but that element isn't the scroller Delete that line and you'll see (because it'll use the page/body as the default). 

 

Right? 

[BearAxe 2 Likes (Newbie)]

D'oh! 

So this is actually a snippet from a larger site. I didn't think it was wrong because i copied the file exactly, but it turns out there are some outer styles and structure that are likely missing. I'm going crosseyed from this project, my bad. Looks like that is the fix for this demo. Thank you so much! 

I'll have to be more careful about how I copy these things over to code pen from now on, but the cdn includes definitely just work out of the box on codepen when you register them lol
Thanks again!