Jump to content

Filip Winiarski

  • Posts

  • Joined

  • Last visited

About Filip Winiarski

  • Birthday 08/25/1996

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Filip Winiarski's Achievements



  1. If he means the scrollbar, you just disabled scrolling for the page. I believe, the answer should be to keep the scrolling, but hide the scroll indicator: ::-webkit-scrollbar { display: none; }
  2. Hey, I just have a question regarding behaviour of stagger methods callback onCompleteAll. onCompleteAll does not fire whenever there are no DOM elements found by a tween - in other words, when there's no target DOM to tween (eg. ".nav-item" does not exist), onCompleteAll does not fire. I wish it would, since I have chain logic in my app. I also do not want to validate whether target elements exist every tween call. I simply resolve a promise on the callback and since stagger does not complete, promise does not resolve. How to deal with that? Thanks
  3. @ZachSaucier @GreenSock I have updated my comment with an example ?
  4. Hey, I've recently had to implement scroll with momentum/inertia. It's actually incredible simple: 1) animate scroll with basic linear tween with short duration (eg. .15 s) - let it be tween A 2) create second tween with easeOut ease and way longer duration (eg. 1 second)- let it be tween B 3) when user scrolls, use tween A - basic scroll movement 4) whenever user stops scrolling launch tween B - you can measure time from the last event and decide if user has stopped scrolling 5) whole magic is how to make smooth transition between both tweens - you can look for deltaY/deltaX values from the wheel event. For more advanced animations I would recommend looking for some physics library, to make all movements super natural. 6) interpret delta value to get the scrollTo x value in tween B https://codepen.io/FilipWiniarski/pen/OeXYKv I also think you could make a custom dynamic ease to make the momentum feel more natural. It's all about fine tuning.
  5. That was the thing, thank you I will update the post with the solution, thanks!
  6. Hi, I have been working on a scrollTo feature using ScrollToPlugin. It's working all fine on local environment, however after a production build in Angular (7.0.1 to be exact) tween throws famous scrollTo error: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object. This is how I import GSAP modules: import { TweenMax, Power3 } from 'gsap' import 'gsap/ScrollToPlugin' console.log(com.greensock.plugins.ScrollToPlugin.version) // 1.9.1 console.log(com.greensock.TweenMax.version) // 2.0.2 And this is how I tween: TweenMax.to(window, duration, { scrollTo: y, ease: Power3.easeInOut }) buildOptimizer for Angular is set to false. Import from 'gsap/all' neither works in a production build. What am I missing? SOLUTION: Angular client is tree shaking so I had to reference ScrollToPlugin just after the import. Credits to @Rodrigo import { TweenMax, Power3, ScrollToPlugin } from 'gsap/all' const plugins = [ ScrollToPlugin ] Angular: 7.0.1 Gsap: 2.0.2
  7. Hi, Does anyone have some idea how can I create a shuffling characters effect using GSAP ? I want to create a stagger for all letters, randomly shuffling its character up to specific one. Here are some examples: https://airnauts.com/ http://festival.lattexplus.com/
  8. +1 As far as I know GSAP applies fixed value (eg. 1000), even tho if you apply for example 100vh value, which should scale nicely. I believe it's done due to better performance, but having an option to animate keeping responsivity would be nice. There's always this moment at the end when I have to bind tweens on window resize to keep things responsive.
  9. @GreenSock thanks for the tips! I forgot that loading time affects the performance of animations, therefore I minimized the video from 60MB to 5MB, added some sexy grid to cover this low quality and everything works sweet For production I will also download the video on website preload so everything should work basically in an instant. Cheers! NOTE: Moving any animations to canvas and SVGs seems to have lower impact on the video playback.
  10. Hi, are there any methods to prevent GSAP animations stutter themselves and <video></video> playing in the background? Any animation I'll play on other elements, even the very basic ones, affect the video performance - resulting in a slideshow. Video is 720p, 60MB. Video without other animations works perfect. And so animations without a video work perfect too. Any ideas?
  11. I have done similar animation some time ago with images. It can be done very simply! 0) You want to render into a canvas 1) Write a method to split a video into different elements (create few video elements with the same video) 2) Position each video element so it creates one whole piece in canvas 3) Create an animation for each element so it actually moves and makes splits visible. <li> elements are only for the texts, all the magic that happens within the video is rendered in the canvas. Very nicely done by the authors, works so smoooothly ( ͡° ͜ʖ ͡ °) PRO TIP: In dev console go to Performance tab, click record, trigger animation, stop record. This way you'll be able to see each frame of the animation to really see what's going on
  12. I have localized the issue. Stuttering was caused by animating super large fonts (the one in background). Still it is weird since I did not have the problem in 1.x. I have also upgraded to Angular 6 last week, which could also affect the rendering. Can't test with 1.x since it hasn't been working properly in Angular 6. EDIT: It's not even caused by the large font animation. Its own presence causes different animations to stutter T_T I'm gonna switch to SVG or background image to walk around this issue.
  13. Hi, I am working on my site and since gsap 2.0.0 I have experienced very weird stuttering bug. Check the video below to see what's going on. Animations were playing flawlessly in gsap 1.x. There are no elements on the page that could cover those blinking areas. I am using simple TimelineMax and TweenMax calls, up to 4 at the same time. (opacity, color and x/y positions). Video: https://streamable.com/sjxrk Did someone have similar issue?
  14. ES6 Package works perfectly - anything can be called within a Tween like a charm! I still have issue referencing body element. It throws an error (see attachment) whenever I reference body tag - either by querySelectorAll or directly in a Tween call. Not sure if it's meant to work like this, I've never been referencing a body tag, but yeah, there's an error Also, from this quick try, transition does not work with ES6, but I guess you're on it TweenMax.to('body', 1, {background: 'red'});