Leaderboard

Hey WHIZZBBIG, This could be an option: https://codepen.io/mikeK/pen/abmPjxz Happy tweening ... Mikel

@Space Man I'm not seeing anything in your pen. Please import GSAP and add the missing HTML elements ("#sweep_slow, #sweep_fast,#flash") so we can check your issue. Btw here is a recent thread about how to sync a video with a timeline:

I'm traveling at the moment, so I don't have much time to dig into this but I figured I'd mention a few quick things: You've got a collapsing margin issue with your pin, so I'd recommend using padding instead if you can. Basically, if your pinned element has a margin-top and it gets enclosed in the pin, that margin-top will push it down from the pin-container. It's not a bug - it's a logic issue with the way CSS works. You should always create your ScrollTriggers in the order they occur on the page so that they refresh() in the proper order. Alternatively, you can influence that with the refreshPriority. In your case, you want your back-next element to have the lowest priority (default is 0, so go negative). You were creating new tween instances in your onEnter/onLeaveBack, so those can't get reverted on refresh so I'd recommend doing a regular gsap.to() with a ScrollTrigger and then define toggleActions: "play none none reverse". Is this closer to what you wanted? https://codepen.io/GreenSock/pen/KKqmGQx?editors=0010

That's really not importing the ES Module. The bundler is looking at GSAP's package.json, so it knows to get it from the dist folder. Unfortunately, you can't do the same for sub-folders. // gsap package.json { "module": "esm/index.js", "main": "dist/gsap.js", ... } And thanks for the tip! I'm going to add it the docs.

Totally is! It's the famous forest that you can not see for all the trees. Just hoping, that this is the forest, Dipit was looking for ?

It's sometimes so hard to back your brain up once you start overcomplicating things

You're gonna love what's coming in version 3.4. There's a new matchMedia() method that does EXACTLY what you're talking about here. This is an example: https://codepen.io/GreenSock/pen/GRoyWBd We hope to release 3.4 within the next week. You're welcome to use the beta in the mean time if you'd like. https://assets.codepen.io/16327/ScrollTrigger.min.js Does that help?

I noticed several problems: Your background image URL in the CSS is pointing to simply "stingray.jpg" which is a relative link...there's no image at that URL so it's not loading. You're loading some kind of jQuery plugin but not jQuery, so there are errors about $ not being defined. Your tween is referencing ".animation", a class, but your element is using an ID instead, "#animation" (notice the "#" instead of "."). So basically GSAP can't find what you're trying to animate. Your code is inside a $().load(), but jQuery wasn't loaded so the whole thing was failing. Here's a fixed version that's just using a texture background that I had on hand: Does that help?