katerlouis

Thanks as always for the quick and helpful reply. I thought about that as well, but am wondering if there's a way to toggle the markers only of specific elements. Conneting the markers to their respected component in storyblok doesn't seem straight forward to me. Will look into that though and let you know!

Hey folks, I don't have time for a codepen right now, sorry– but the question is very simple. I'm working with Nuxt 2 and Storyblok as our headless cms and want to give my editors an option to show scrolltrigger markers. Killing and reinitializing the scrollTrigger is not a great option for me, so I would like to add (and remove) them dynamically for an already existing instance. Here's how I create scroll triggers: // Vue single file component mounted() { this.scrollTrigger = ScrollTrigger.create({ ... }) }, I've already tried to change `this.scrollTrigger.vars.markers = true` followed by `this.scrollTrigger.refresh()` with no effect. The main question is if it's even possible to add markers after the fact; Thanks! Louis

Thanks for your help, guys! Unfortunately I seem to have failed explaining the actual issue– its hard for me to grasp it. I use Nuxt3 with Pinia (basically Vuex 5) as global store. So I'm already using something with proper state management. I'll look into "Am I a real developer" further, but at first glance it seems to be a questionnaire. I've made one myself using Vue a few years back and hadn't had much issue doing that. Maybe the "state management" was more straight forward in that. If my game was "only" determined on the current round played, I also wouldn't have issues I guess. But inside one round are more "little moments" that the UI needs to reflect. It feels like just using animations for entering and exiting a round is not enough. Hm. I can't shake the feeling that there must be a common pattern for this. Some kind of "controller" – I lack the words to express my issue ?

This is off-topic, but I have no where else to turn to ... but hey– maybe there is a magic GSAP way of handling what I'm asking? Joking aside. Feel free to delete this post if its not desired. ––– I really struggled to phrase the title, which shows how lost I am. I consider myself a good web developer, but structures like this break my head ––– The game I'm remaking a little ear-training game of mine (https://twelvenotes.co/) with Nuxt3 (and yeees, also GSAP of course) The game features 8 rounds of questions. Each round plays 2 musical notes and the player must tell which one is higher. The interactive concept for the new version has changed. The game does not start automatically, but waits for a "Start now" input from the Playeyr. Each round the two notes play automatically in sequence. The Player has two options now: 1. Click on one note to lock in the answer to which note he thinks is higher 2. Replay the two notes in the same sequence, but lose "1 life" (or "extra listen") of 3 Answering a question shows an animation indicating if Player is right or wrong. After the animation is completed the game should move to the next round automatically and also start the round automatically, after the animated transition to the new round is done. The whole game and each round individually is timed with a visible stop watch which will influence the final score. After 8 rounds the Player is presented with an end screen showing the performance and a score. The problem As of right now, Creating the array of playable rounds, locking in the answer, moving to the next round, playing notes, replaying notes are all separate functions. Now to the question: Whats the best way to control all these functions? Especially with timeouts needed for animations and playing notes etc. it's hard to structure which function does what and who tells it when to do it. Who controls when we move to the next round and when we will start that round? Moving to the next round should only be possible when the current round has been answered. But should all of this be the job of `moveToNextRound()`? And who actually starts the round as in playing the notes, starting a stopwatch for this round etc. – And who stops the timer of the played round when the round has been answered? Is that a job for `moveToNextRound()` or `startRound(roundIndex)` or is that the job of a new function `finishRound()` - but who then calls `finishRound()`? Or should it be `finishCurrentRound()`. When a question is answered we need time for an animation telling the player if his answer was right or not and so on and so forth... ... I guess you get the picture. Structuring this is not easy for me. While doing it I constantly go back and forth between which function does what. The question Can you guys point me to best practices or resources in that field? Is there a common pattern I just don't know (the name of)? Only thing I can think of googling is: "Gamecontroller"... which obviously only gives you results for gaming console gamepads. Thanks!

Hey folks! Again, long time no read That's all wonderful news and I have a question I noticed in the nuxt starter template that you made `ctx` a reactive property using `ref()` – Why are you making it reactive?

@OSUblake Any news on your bleeding edge idea? ?

let dragger = new Draggable(item); dragger.startDrag(e); that looks promising. I didn't know you could create a draggable like that and start the drag by hand. But still.. since I'm in a Vue application, I would like to avoid things like `document.body.append` or `template.clone` – Vue likes to keep rendering in its own hands, based on state etc. – Surely there must be a trick to start a drag without having an actual item to move, right? Really curious what Blake is cooking up here ? Sneak peek for future versions is always fun. Thanks!

Sorry for the misunderstanding; a video is a great idea. I basically want to recreate how most calendars work: https://www.dropbox.com/s/0gjp4c34bhyer2c/OSUBlake is best <3.mov?dl=0 I've already have the easy part done: dragging and dropping the item as a whole. Whats left is dragging the edges and therefore changing the items duration. I guess I'll manage that aswell. The topic of this thread is adding new ones (first action in the video) @Carl That's not quite what I'm looking for. I don't want to clone items (yet :D) – right now I need to create them out of thin air :D:D

Fascinating; so it's just a bug in an old version? :D

I've changed it once! And I don't see any reason to do it again Unfortunately I still need some help to get a good concept in creating a new item like this "on the fly". Having an invisible ghost there that's being dragged or something doesn't feel right. And I can't find a way to "not actually drag" the main timebar (the bounds for my items) but rather "just use the Draggable framework and events to manipulate some state". Maybe there is a way to make the timebar draggable, without applying the transforms? And of course onRelease all internals (y position etc) should be reset for the next possible drag to create a new item. So, as you can see I could need some of that blakicious magic dust

In the official resize codepen example, the box itself is not moving: https://codepen.io/jamiejefferson/pen/ZEQEJL but in my fork of it, where I only use type "top" to lock resize direction to vertical, the box is dragged. Can you explain why?

Eingefügtes_Bild_17_03_22__11_44.heic I have a vertical timebar (see screenshot; I could only upload heic because 19kb max upload size is.. well.. challenging ). The user should be able to create an item by clicking somehwere and drag in 15minute increments. I'd like to use Draggable for that but am honestly a bit confused on how to go about it. As I understand Draggable right now, it's intended use lies in manipulating existing elements. But for my usecase we would need to create a new item. I'd still like to use Draggable, because snap, bounds and autoScroll is already solved here and seems very robust! I'm working with Vue, so maybe Draggable can be used on the timebar (the bounds) itself to manipulate state for the new item without actually moving the timebar? Appreciate suggestions (or more likely... existing solutions I've just missed in the forums and on codepen :FFF) Thanks! René

Interesting. I was thinking on creating the trigger somewhere inside the markdown plugin chain, but doing it after the html rendering is complete and looking for data-attributes might be a better way to go. I also thought about using containers for this. But that would kill our relational margin rules inside markdown (`p + h3 { margin-top: 70px }` etc.) Unfortunately I have no freaking idea how to extend markdown-it myself. The "docs" are terrible. This document suggests that I need to "morph tokens" rather than creating an inline or block rule, but cannot find out on how to do that ? – If anyone stumbles upon some resources to extend markdown-it by morphing tokens, I'll give you a cookie!

Hey folks, long time no read! As usual I come with a rather complex use case, so a little bit of context might be helpful. As we are pulling more and more content for our website from our cms storyblok, we now have situations where a ScrollTrigger on certain headlines should trigger (or scrub) animations that are sticky right next to the text. Since we support markdown in most of our text fields, my preferred solution would be to enhance markdown with custom syntax. This syntax would need to do two things: Get the resulting dom element (<p>, <h3> for ###, <a> for [http://domain.com] etc.) as trigger element Get a string parameter I can use in inside of `onEnter()` to call a function or dispatch an event Point 2. would exceed this post, let's just assume I want to console.log this string parameter. Point 1. on the other hand is no-mans-land for me, though. Adding custom wrapper syntax in markdown-it is rather straightforward (I hope? :D) if lets say I want to achieve `%%%My custom section%%%` to result in `<section>My custom section</section>` – but I'm afraid that adding functionality to existing wrappers in markdown is a different thing entirely. What I want from you guys now: a) Syntax suggestion: how would you like to write this b) Might be off-topic, so bonus points if anybody know how to do this do this for all "normal markdown wrappers" with markdown-it Thrilled to hear your thoughts!

Yeah, seems like "gradually pinning" is what I'm looking for. Has anything changed since November 2020, @GreenSock?

As far as I see the scrollTrigger pin feature, it acts like `position: sticky` in feel. Scrolled elements move with the same speed as the scrollbar. When an element gets pinned/sticky, it hits a wall and goes from a 100 to 0 in an instant. That doesn't feel very good. Unfortunately I don't have a codepen to illustrate what I want, because.. well, I wouldn't need to ask then, would I? But back in 2017 I've made an animation that comes very close to what I want to do now: https://dumbo.design/airberlin (the laptop mockup as chapter intro) The difference to what I want now is: the laptop continues to move in the natural scroll direction very slowly (kinda like the SlowMo ease); I don't want it this time, the pinned element should be dead center and don't move at all (but of course I'll make another thread to do just that with ScrollTrigger aswell :D) the whole concept is the other way around: I "fake" the scroll, and the pin is "real" – the laptop is `position: fixed` all the time and I try to match the scroll initial movement speed with the scroll speed, which is definitely not ideal since the concept is so different, the laptop does never occupy any space and– .. it's hard for me to put into words but I just don't want to go this fixed route ever again the performance is just pure crap and I'm pretty sure not having to transform translate a fixed element until its pinned and just use the natural scroll and at the end some slight transforms to smooth things out, is way more performant than faking the entire "scroll distance" until the element stops. From what I saw you guys set `position: fixed` while pinning and set a transform translate immediately when the element gets unpinned and position: fixed got removed. Maybe there's a way to also animate the transform translate before the position: fixed gets set? Bonus: What would be reeeeally awesome is when the "ease" is not predetermined, but dynamic and reactive to the actual scroll speed. I just love the feel of `scrub: 1` and our users almost always play around with it in awe. An adaptable "pin dampener" would feel very organic Shoot it, Elders! Swing that file-size hammer. I'm ready for it ?

I'm also curious what the Elders think about this and somewhat hope they are already brewing for a solution behind the curtains

I've already figured out some issues with the dynamic duration. I didn't know the velocity is negative when scrolling up. And I thought `mapRange` would already be clamping. It's nice to have the option that it doesn't and with pipe its easy to chain; but – you know me In my opinion it's inconvenient to update the same values in both the clamp and the mapRange function when I want to find the right values for my application. What do you guys think about a clamp-boolean parameter in mapRange? Somethine like this: `mapRange(0, 1000, 2, 0.5, true)` ? Anyhow: I've forced the velocity to a positive number and added a clamp, so now the max and min duration is actually 2 and 0.5 seconds. It feels good to me now. What do you say? https://codepen.io/katerlouis/pen/rNjaMeY PS: Yeah, I had a few projects that didn't require any animations what so ever (you know I've still added a ton; but nothing complex). I've learned a good and important amount; but man am I glad to am back in the saddle – It was only me using the account anyways, so I figured to rename it. Glad that you remembered me

Cool! Very good video! Especially the real life example at the end is important in my opinion to drive the point home. I love it! So my assumption is right for gsap 2: there was an automatic overwrite. I'm wondering why you chose to set it to false by default? `auto` as the defaults feels like it makes more sense. Back to topic: unfortunately I can still provoke unwanted jumps/flashes in your pen when scrolling back and forth heavily

Heyho partypeople, I want to hide and show a button at a certain scroll position. Super easy with ScrollTrigger (thanks for that <3) But of course the "perceived easing" should be the same no matter which direction you scroll / if the button hides or shows. Firstly I've tried two separate tweens. One for "show" and one for "hide", each with its own ScrollTrigger. But.. well.. yeah, .. pure disaster. The solution I came up with (and has been suggested multiple times in the forums) to use one master tween with linear easing, and tween the progress of that. While I was at it, I figured to use this juicy new function "getVelocity" to alter the duration based on the scrolled velocity. My issue now is: When you scroll slowly over the trigger, and scroll back to trigger the new progress-tween, and then immediately down again, the "hide" tween is still running, and the button hides in a flash My expectation is that once you start to tween the progress of a master tween, any other tweens currently tweening this progress get canceled immediately. Is this expectation wrong? Or is something entirely different causing this issue? Thanks! Louis

Sounds good! I'll make a new topic for that.

What about the linter whining when installing gsap globally? Yeah, I was also exited to dive into Flip, just to realize that Vue-portal for instance (or basically any other conditional rendering etc.) is actually dismounted and mounted back in again and therefore not compatible with Flip (as far as I can tell right now) – I'd love to use the recorded flip state on "different" elements (basically the same element, but technically a new one )

Thanks guys! My "actual GSAP code" is only used by the `<transition>` component or in the mounted() hook, so only when the DOM is actually ready. Never thought about doing that for registering plugins, though. It feels a bit sketchy to install it globally like this – but Blake is never wrong ^^ Wouldn't the linter scream "gsap is not defined" upon usage? And how would I install Flip globally with this method?

Okay, very interesting. Would you suggest to always wrap registering plugins with `if process.client`? Or maybe somebody more familiar with Nuxt knows a way to install gsap and the plugins I want globally so that I don't need to import them explicitly in my components. It feels like Nuxt says bye to tree-shaking anyways and I've gotten quite fond of not having to import components etc. – gsap is in fact the only thing I still import by hand ? As for the transpiling– I'm pretty sure on build everything gets squished into ES5 anyways?

Interesting. So what exactly happens when you transpile gsap and why do I not need to wait for `process.client` once transpiled? I'm honestly also not very firm with what happens under the hood when doing SSR. I just realized that the development server also already does SSR and that SSR isn't just happening when you run your final SSR build on the server. Why `if (process.client)` even works is also a mystery to me – My guess would be the entire <script> section gets called both on the server and then again on the client? So "wait for process.client" isn't really the case; there's no waiting happening – If that's too much off-topic just tell me and I shut up The questions about transpilation and why transpilation wouldn't require to check for `process.client` remain though ?