Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

2,650 profile views

katerlouis's Achievements

  1. 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!
  2. 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!
  3. Yeah, seems like "gradually pinning" is what I'm looking for. Has anything changed since November 2020, @GreenSock?
  4. 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 😎
  5. I'm also curious what the Elders think about this and somewhat hope they are already brewing for a solution behind the curtains
  6. 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
  7. 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
  8. 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
  9. 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 )
  10. 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?
  11. 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?
  12. 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 😎
  13. I am terribly sorry, the installation docs mention server side rendering and nuxt explicitly .. So the suggestion is to only register the plugins on the client using `process.client` but import the necessary scripts "as usual". That makes sense to me now. I'm still wondering why this hasn't been a problem up to here; I haven't encountered this issue yet and have always registered right after import (apparently on server side?) And what exactly happens when I "transpile" gsap? Would I still need to add the "process.client" conditional?
  14. Thanks for the quick reply! The thread you linked comes to the same conclusion as I have, importing UMD modules, right? But as for the error `doucment is not defined` – importing Flip on client side would result in a big delay, right?! How could you even import with conditionals? That sounds sketchy to me And how would transpiling GSAP solve the the document issue? Could you explain the two options a bit deeper, please? EDIT: To be clear, I do not use Flip yet– all I'm doing is registering it, which already results in the error.