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?