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

@Cassie - Thanks so much, that's sorted things out nicely and set me on the right track. Just the bump I needed to start progressing

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

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

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

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.

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

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!

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

Hi all, totally new to GSAP, I'm trying to implement a simple animation via scrollTrigger.

 

The idea is that "Part 2" should animate to x: 500 when it appears in the viewport. As you can see, I'm using scroll-snap css rules.

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