Jump to content
Search Community

How to Register Plugins In Vue CodePen

BearAxe test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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? 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
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...