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,473 profile views

katerlouis's Achievements

  1. Yeah, seems like "gradually pinning" is what I'm looking for. Has anything changed since November 2020, @GreenSock?
  2. 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 😎
  3. I'm also curious what the Elders think about this and somewhat hope they are already brewing for a solution behind the curtains
  4. 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
  5. 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
  6. 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
  7. 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 )
  8. 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?
  9. 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?
  10. 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 😎
  11. 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?
  12. 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.
  13. Heyho partypeople, I don't know how to recreate this issue with CodePen, since I'm using Nuxt. And adding my gsap-bonus files to codesandbox also doesn't look like a good idea 😕 So I'll have to go the old fashioned way: I'm making a Nuxt (VueJS) app and have gsap bonus (shockingly green) installed as suggested: `$ npm install ./gsap-bonus.tgz`. In my simple test page component `src/pages/portal.vue` I install Flip like any other plugin: ```js <script> import { gsap } from 'gsap'; import { Flip } from 'gsap/dist/Flip'; gsap.registerPlugin(Flip); export default { // Vue magic here ``` When I navigate client side from `/` to `/portal`, it works as expected. But when I hard refresh on `/portal` I get a breaking error saying: document is not defined – Apparently the issue is caused by this: Flip.register = function register(core) { gsap = core; _setDoc(document.body); _toArray = gsap.utils.toArray; _closestTenth = gsap.utils.snap(0.1); }; I've already tried installing plugins by importing the ES modules instead of UMD modules, which works on client side navigation, but again not on hard refresh. Then I get: Cannot use import statement outside a module Why is Flip dependent on `document` during import? And how would you suggest getting Flip to work with a Nuxt component? Thanks!
  14. Thanks! Feared so. What is `overwrite: 'auto'` doing in your scrollTween? Also thanks for the idea of killing the tween when `wheel` event is triggered.