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

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. https://codepen.io/block-head/pen/WNzWWbZ 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...

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: https://codepen.io/block-head/pen/ZExZjrv 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.

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!

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.