Jump to content

katerlouis last won the day on May 30 2017

katerlouis had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


katerlouis last won the day on May 30 2017

katerlouis had the most liked content!

Contact Methods

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

3,216 profile views

katerlouis's Achievements

  1. 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!
  2. 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
  3. Fascinating; so it's just a bug in an old version? :D
  4. 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
  5. 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?
  6. 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é
  7. 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!
  8. 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!
  9. Yeah, seems like "gradually pinning" is what I'm looking for. Has anything changed since November 2020, @GreenSock?
  10. 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 😎
  11. I'm also curious what the Elders think about this and somewhat hope they are already brewing for a solution behind the curtains
  12. 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
  13. 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
  14. 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