Jump to content
Search Community

Newbie -- can anyone tell me why this doesn't work?

block--head test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Thanks... So I've added gsap core and ScrollTrigger via script tags in the HTML - not sure if that's the right thing to do...

As for the syntax, I used the "simple example" from the scrollTrigger documentation, just added duration: 1 to the animation..

Still nothing happening though!

Link to comment
Share on other sites

OK... so maybe calling js via script tags wasn't the way to go (at least not on codepen)...


Have created a fork of the GSAP starter project (giving me all the gsap plugins), and now progress is being made:


See the Pen ZExZjrv by block-head (@block-head) on CodePen


I added the "box" class to the first div "HERO (Part ONE)" as well as Part TWO - this shows me that the animation is taking place on page load, NOT when the div comes into the viewport.


An odd side-effect is that the css background color has shrunk on the "box" class elements.

Link to comment
Share on other sites

Update: looks like scrollTrigger doesn't want to play nice with 'overflow-y: scroll' in the css


I forked my original pen (the first one linked in this post) and commented out that line, now the animation works - but of course no scroll-snapping.


See the Pen WNzWWbZ by block-head (@block-head) on CodePen


Incidentally, the JS for scrollTrigger works fine without needing to call the library since (as I assumed in the first place) they are pre-loaded on codepen anyway.


Obviously, I need to sort out the html and css since the color block is moving with the animation, but apart from that I think I'll try scroll snapping using gsap as outlined here: https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/#aa-scroll-snapping/ - presuming that if I keep things within gsap framework everything should work well together...


rather more than I'd bargained for in a first try, but here goes... :)

  • Like 1
Link to comment
Share on other sites

  • Solution

Ooft, yeah I would definitely give that article a miss until you're much much further down the line. It's excellent but not beginner friendly at all!

You just needed to tell ScrollTrigger that you're using a custom scroller, and do a little loop around your sections so that each one gets triggered.


7 hours ago, elegantseagulls said:

With your setup, you'll need to change ScrollTrigger's scroller target to '.container'

^ Ryan mentioned the scroller target here

See the Pen QWmPPOr by GreenSock (@GreenSock) on CodePen


Also, small tip - if you go to 'settings' you can add any JS libraries, just type them into the search box.



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...