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

[block--head]

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

[elegantseagulls]

Hi @block--head,

 

Your CodePen isn't including GSAP and ScrollTrigger's Javascript.

 

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

You'll also want to look at the proper syntax/markup for the scrollTrigger object: https://greensock.com/docs/v3/Plugins/ScrollTrigger

[block--head]

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!

[block--head]

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.

[block--head]

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

[Cassie]

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.

 

[block--head]

@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