Acccent last won the day on February 25 2016

Acccent had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Acccent last won the day on February 25 2016

Acccent had the most liked content!

Community Reputation

95 Contributor

About Acccent

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

1,791 profile views
  1. Performance difference between Chrome & Firefox

    After testing some things out, it looks like the main factor is that the filters section has lots of SVGs, which are all from FontAwesome... unfortunately that's not really trivial to change. I guess I could create PNGs but it's a bit of a hassle, I don't know if I want to spend that kind of time on this project still! It's already late...
  2. Performance difference between Chrome & Firefox

    Thanks Sahil and Jack, I'll try all of that!
  3. Suggestions Needed: Getting Started with GSAP

    No worries! I don't have anything super specific in mind... It's a whole lot of things to be honest, I'm afraid if you wanted to seriously address this and make sure perception of the platform improved in this regard, you'd have to consider a big reworking of the communication. As it is now, the major selling points seem to be that it's easy to create complex animations, thanks to the features and the ability to create timelines that you can then manipulate easily. But in my own experience (and I don't claim it to be any more than that), complex animations (like a logo animation or a character doing a little dance or whatever) is a tiny percentage of what I'm using GSAP for; I'm more interested in moving around parts of the web page, adapting to user inputs on the fly, creating interactive content etc. I guess on a more easy-to-implement level you could make sure to present TweenLite as not only the fundamental atom of animations, but also the default way to leverage GSAP's power for any kind of operation. The front page doesn't have a lot of things to really convey what GSAP can do; there's the video that goes too fast to really understand anything beyond "this is a powerhouse", then a list of plugins that don't really mean anything to you the first time you see them. If you go to you'll see an animated banner (which furthers the impression that you will only use GSAP for static, self-contained animations) and then paragraphs saying that it's fast, robust and compatible – that are convincing, but don't work to expand your understanding of what the platform can do. I'd say the best thing would be to try to get the user to see clear, impressive examples as soon as possible. If you go on or, there's almost no words, they let the examples speak for themselves; it makes for pages that are maybe a bit too intimidating or obscure, but are very good at giving you a sense of what these tools are for and what they can do. Having a simpler, more friendly homepage for GSAP that immediately shows embedded examples (not just gifs or videos) of a big variety of uses, from the most basic tweens to more unconventional uses like delayedCall() and SVG manipulation and ScrollTo plugin, etc., would go a long way towards saying "look, you can basically create a movie with this, but also you can use it in tons of creative and web-specific ways". I don't know for sure – I'm thinking the latter. Every time you explicitly perform an action on a tween or it restarts, it would recalculate. The use case is, say I want an animation of a frog jumping every X seconds towards the cursor; right now I'd probably have to call a function that creates a timeline with passed arguments. But I think it'd be nice to be able to create the timeline beforehand, and have a parameters to let it know that the direction of the jump should be reevaluated every time it runs. (To be clear, I know this is doable now – what isn't with GSAP? – but I think it would be more intuitive and faster to have a parameter of its own inside the TweenLite and TimelineLite vars.)
  4. Hello everyone, This is one of those cases where I can't make a reduced test case on codepen because I can't identify the problem, or even if there is a problem at all. So, first of all, I just wanna be clear that I don't expect anyone to really dive deep into this, I'm only asking in case a solution jumps out naturally! I'm almost done with a new website which you can see here: (even though the site says to share it with everyone, please don't yet! it will soon be ready, but it's not 100% there yet.) One Chrome, you can click on the button below the info section to smoothly transition to the filters. Similarly, if you click on a button, a modal opens, it's all very smooth (at least it is on my machine, but it's just a modest laptop). I'm on Vivaldi, not Chrome per se, but it shouldn't make a difference. Firefox on the other hand really struggles to provide any kind of smooth animation. I used to have the whole website inside a fixed, viewport-sized element to handle scrolling better on iOS, but when I had the FF couldn't cope at all and I sometimes went below 1fps. (Vivaldi had 0 issue.) I since removed all of that, but I wonder if maybe there's a remnant of that structure somewhere that's causing the lag/stutter. Should I add weird hacks like backface-visibility: hidden; or perspective: 1000? Should I use will-change and try not to think about what an awful property it is? Is Firefox just simply not very good at animating stuff? If anyone had to face similar issues before and found a way out, I'd love to hear about it
  5. Suggestions Needed: Getting Started with GSAP

    I somehow just saw this thread I think, for me, all the stuff about the position parameter, chaining methods, etc. was all fairly easy to grasp and conveyed clearly by the docs. The thing that took me a while and still sometimes catches me off-guard is that fundamentally GSAP isn't necessarily focused on animation at all, like I've seen in another thread it's more of a data manipulation platform than purely an animation tool. When I first learnt about GSAP I was looking for an animation tool to replace CSS or Velocity, which isn't surprising because that's how it's advertised. But that approach severely limits what you can do, and even sometimes makes you do all kinds of inefficient or even just plain wrong things. For instance, I used to believe you should set up all your animations right after page load, and then just play/pause them whenever. That they were basically independent, static objects. This led me to think that GSAP was nice but just not what I needed for basically anything that needed user input, or was dynamic in even the smallest ways. I used to think I couldn't use GSAP to move something outside of the viewport because maybe the window had been resized since and so the animation would be incorrect! Now I know that you can (and should) just make tweens and timelines on the fly whenever, use invalidate() if you have to, build tweens dynamically with functions that you call from inside timelines, etc. The debounce/throttle thing I made is a good example of how versatile GSAP is, it really doesn't need to be just about pre-made immuable animation. Heck, now I use just TweenLite to toggle css classes, just because I'm used to the format. (On a related note, it would be so nice to have a way to make a tween or timeline self-invalidate every time it's played! maybe there is already and I'm not aware...)
  6. Is it Possible to control a Scroller without "Scrolling"

    Maybe you could make that whole div at the top position:absolute, then monitor its clientHeight and use that to increase the height of a position:relative div underneath it (or just increase the top margin of your content, like in the pen below)? (Also, did you try just using scrollTo to stay at the top until the add has finished loading, or the user initiated scrolling?)
  7. Debouncing / Throttling / rAF with GSAP

    I updated the pen (and the code in the OP) because I was annoyed that you could only ever pass "static" parameters to your debounced function. So now if you don't set the params property (or set it to null later), the function is passed the event's data, which allows you to test against mouse position, window size, key code etc. Check out the update codepen above for a cool moving box
  8. Codrop's Slice Revealer like animation using GSAP

    You can also animate the white sliding elements, like this: (That demo has more stuff than is necessary for you, but it should be easy enough to understand what's going on)
  9. Debouncing / Throttling / rAF with GSAP

    Aaaand a fancy new pen and now I'll stop spamming this thread. Thanks again everyone for the help!
  10. Debouncing / Throttling / rAF with GSAP

    Ah, that makes sense, thanks! I pretty heavily refactored the codepen above (taking a bit more inspiration from @Diaco) so that the timing is now more precise and also, most importantly, you can access and change the functions, delay, leading and throttle parameters of a given stipple on the fly.
  11. Debouncing / Throttling / rAF with GSAP

    Going back to improving the solution, do we know why dot.restart(true, true); still calls the onStart callback? I assumed it wouldn't since suppressEvents if set to true. Is that by design? (If it is, maybe there's a more efficient alternative to if { dot.progress() > 0.01 ) { dot.progress(0.01, true); } ?)
  12. Debouncing / Throttling / rAF with GSAP

    I knew that, but I tried to avoid really thinking about it for as long as I could... hehe. In my mind, the variables inside the function were going to be reinitialised every time the function was called... I didn't realise that since the function was returning another function, the context stayed the same every time that returned function was called. (I'm probably not making much sense! 😂 )
  13. Debouncing / Throttling / rAF with GSAP

    ok, I got inspired by Diaco's examples and made a new version. Also I get now how we don't need to store anything outside of the function, so my understanding of JS as a whole improved thanks to this! This accepts either objects and parameters, and can be used for several functions at once. Have a look at how the 4 events are set up. (By the way, maybe that wasn't clear in the previous pen, but each square is a checkbox that you can turn on or off.)
  14. Debouncing / Throttling / rAF with GSAP

    So, I simplified it quite a bit, and made it return something so you can remove the event listener. Here's the updated code: function stipple(id, func, delay, throttle = false, leading = false) { let stippled = function() { if ( !dots.hasOwnProperty(id) ) { dots[id] = TweenLite .to({}, delay, {}) .eventCallback(( leading ? "onStart" : "onComplete" ), func); } if ( dots[id].progress() === 1 ) { dots[id].restart(true, false); } if ( !throttle && dots[id].progress() > 0.01 ) { dots[id].progress(0.01, true); } }; return stippled; } The codepen in my post above is the updated one, I forgot to fork, oops. I don't understand how lodash and underscore manage to do this without storing any external references. Here are the sources, if anyone's interested: I'll go with the solution above for now, but please feel free to keep improving on it, and if someone sees a performance issue or the like, by all means share it