brands & beyond GmbH

Thanks @GreenSock, understandable. Not expecting anything Maybe someone else knows an example which archives a similiar effect by modifying particles on mousemove. I want to squeeze the most out of it and any advice would be helpful since I want to archive this by my own. Or at least apply a technique which has the most outcome in terms of flexibility and performance. I´ll try a different approach over the next days and will post my results here, if I got around the problem.

Hey guys again hope you´re doing fine. I´ve had a great time with pixi and gsap over the past weeks and developed a tiny class for it. It will capture width and height of a selected element and appends a pixi generated canvas to it. A pixi container is stored inside filled with a matrix which represents the dimensions of the parent stage, but splitted to several smaller pieces (the gridDivider can be adjusted on class initialization on the bottom of the js). Now we have a prepared object with all needed references and it´s ready to apply some gsap goodness on it. Next I started with a Sub Class (HoverMatrixGrid) which captures data from the mousemove event and animate the "pixels". I created some animation blueprints with the mighty gsap.registerEffect(). and applied these as methods of the pixel object itself to alter states and get control over the animations. But atm the opposite is happening . I´m experiencing kinda artifacts / debris in the mousemove triggered animations, especially if you move the cursor diagonally some pixels on the edges don´t "fade out". If you swipe some seconds on the screen you will recognize them. I can imagine there is something wrong with my state handling, but can´t figure it out since days, so I want to ask if someone had experienced this behaviour. Is it something which comes from the asynchronous handling of object data? Are these states nescessary? It´s printing the generated "grid"-object with all it´s data and particles in the browser console. ps: congrats to your newest release (3.10)! Thanks, Richard

Hey guys, first, congrats for the 3.7 release. Absolutely smashing. ❤️ You´ve created this awesome demo of skewing elements based on the scrolling velocity (https://codepen.io/GreenSock/pen/eYpGLYL). This leads me to the idea, where a svg shape get´s morphed between 2 states (scroll up, scroll down) and bounces back to idle as soon as scrolling is stopped. The Idea is that the bending of a shape is forced by scroll velocity and resetted on scroll stop. I´ve made a small demo for the basic behaviour of it. atm it uses timeouts to archive a similar effect. I´m wondering if the bending of the shape is looking more organic with scroll velocity instead of slow tweens and timeout. Any experience with that? Greetings and thanks for reading, Richard

oh , so close. absolutely smashing how good gsap and you guys performing at this ❤️ thanks for the fast answer!

Hey guys, helpless me again I´ve made this codepen to abstract my problem, which solves my initial problem of disabling multiple gsap-instances when switched to some other scroll reference. very useful! Now I´m facing quite the same issue as described above, but by using asscroll library. In the example it´s not refreshing the gsap params if you open the overlay by clicking one of these boxes. https://codepen.io/rkxn/pen/yLJKBpw Can you please check if this is the right way to implement scrollerProxy? stay safe, Best, Richard

Okay, I stumbled upon this, but totally overlooked that... especially the pen in that reference, which is well explaining the solution Thanks Zach!

Hello again guys ✌️ I´m right into the ‘basic‘ ScrollTrigger thing for quite a while now. Since I´ve upgraded myself with ShockinglyGreen, so things getting even greater with the MorphSVGPlugin, which progress of transformation can be controlled with ScrollTrigger. The Results are impressive. After playing around with this while interacting with svg elements directly in the DOM, I slightly get disturbed by the fps drops this can cause with other animations or if you get your page in bigger screen dimensions or resolutions (4K / Retina). I stumbled upon a great library called paper.js which can bring path information into canvas, which (in theory) should appear as the more performant approach, especially if you scale things up. Also the feature to group and edit things in paperscipt could be a good partner by creating for example a sweet set of dynamic fullscreen transitions without touching the DOM. The example below shows that it´s contents created with paper.js / paperscript can be changed by gsap and ScrollTrigger in a simple manner: demo It would be great to have a smart way to archive the MorphSVGPlugin behaviour inside this canvas stage which is controlled by ScrollTriggers progress. Maybe there is another general solution or it isn´t even really faster from an performance perspective than I expected. I´ll fork a simple demo to see morphSVG in action Seen on: Would love to read some thoughts from you about that Best Wishes, Richard

Hey Community, Hey Zach✌️ thanks for having this great forums for this excellent piece of software. This is my first post here. I´ve been using GSAP for quite a while now - getting more and more stunned about the newest features and the flexibility of scroll trigger and the quasi-replacement of ScrollMagic (Thanks for the good times). So I stumbled upon this thread these days on the search for a solution to snap only to the next/previous panel and blur out the momentum scroll (macOS trackpads). The latest solutions posted in this thread is nearly there and very helpful, but in my case (Macbook Pro 2019 / Trackpad or Magic mouse) It´s kinda "over-jumping" to the panel after the desired one, which I think is caused by the momentum scrolling mounted to trackpads and magic mouse on MacOS. Would be nice if there is a easy way to adapt the ScrollMagic-Example below to the already posted solutions , but my knowledge about Javascript is simply not good enough.. Maybe you can have a look at this? ? https://codepen.io/verticalgrain/pen/VPNVxb Greetings Richard