mvaneijgen

Your frist problem is that you're returning the function it self not the time line function sw1() { var switchTl1 = gsap.timeline(); // return sw1; // ⛔️ name of the function return switchTl1 // ✅ name of the timeline } Over alI would create a master timeline (you already have that) and create functions of all your animations like you do with `sw1` and `sw2`, but do it also for the keyboard and the coding on the screen and add all those animations to the masterTime line. Right now there are all kinds of animations that are either playing or not, but are somehow hidden ( I don't know what that means for performance, but I would not animate things that are not visible)

I would fake it with chaining the background color of the loader to black at a certain point. It is also better to use the gsap 3 syntax instead of the old syntax Here is a small demo, try to tweak it yourself to help you understand it better https://codepen.io/mvaneijgen/pen/OJNxKNP

@emjay be sure to share your findings here, to help others in the future.

@emjay yeah that was also something I was wondering and found that someone already asked something similar on this forum and you'll need to use the `ScrollToPlugin` see the topic https://codepen.io/GreenSock/pen/bGpeZNj

https://codepen.io/mvaneijgen/pen/bGpogXE I've ad a label to each slide and than change da anchor to a button on which I check on click to what slide it should go and than `.seek` to that slide. Hope it helps

I think GSAP doesnt know what to do with CSS Grid. Pining an element is just setting it `postion` to `fixed` with some other magic. I've changed your CSS Grid to use flexbox and than it does stay in the middle. https://codepen.io/mvaneijgen/pen/eYZEbKP

You can use the `onLeave` hook to do something. Check the docs here Example https://codepen.io/mvaneijgen/pen/gOrwyXy

Where is your https://codepen.io/pen example?

@mikel that is fine, but from that I would never have guest I could use it in a `.to()` function.

Where can we find info about the `snap:` property? I can't seem to find it in the docs and if I google it I get only topics for draggable.

Seems to work great, it really helps if you get a codepen demo ready https://codepen.io/mvaneijgen/pen/jOWpLoL

Can you also tell us what you are trying to do? Right now we can only see how you are doing it, but not what it needs to do, because if we know what it must do then maybe we have a way easier solution. Also putting your code in a codepen.io with a reduced test case, so we see what the code is suppose to do exactly. When I see your code I think of a few things what maybe of use Have you checked out stagger: {}? Have you checked out the GSAP.utils? Wrap() seems of use You can animate arrays with a timeline `tl.to(["ITEM1", "ITEM2", ...., "ITEM99", {x: 5 })`

create a variable which is placed out site of the string. start: "top " + DYNAMIC-VALUE-HERE, Something like this should work.

@Jordan Castiel I've tried something, but I can't get it to start from the third one and than move at a constant rate with the list speed, but maybe it helps you https://codepen.io/mvaneijgen/pen/LYGmQBW

Why don't you position them where you want by forehand and than animate them? https://codepen.io/mvaneijgen/pen/PoZRKBK