Jump to content

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

Acccent last won the day on June 5 2018

Acccent had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Acccent

  1. I think the issue is that you're tweening the opacity only after the menu has finished growing/shrinking... when you open it, it starts at 0 and then fades in once the menu is completely open; but when you close it, it starts at 1 and will only start fading out once the menu is closed. Additionally, judging by how the values move when monitoring them in the inspector, it looks like for both opening and closing transitions they tween from 0 to 1. Echoing Carl's sentiment though, a reduced example would make it way easier to understand what's going on. I think you should make just one timeline that contains both the size change of the menu and the fade in/out of the li elements. Then you'd be able to play or reverse that timeline when appropriate.
  2. If you want it to be fancy, when going eg. from 20km to 20m, you could make it tween down to 1 and have an onComplete callback that changes "km" to "m" and starts a new tween from 1000 to 20 edit: I just realised I invented "km" ! oh well, the logic still works with m and k
  3. This isn't strictly GSAP, more of a general JS question. Is this what you were looking for?
  4. Right – as I thought, this is a bit more complex than just rotating two independent elements. I'm not going to make a full demo as it would require more time than I have, but unless you can just rotate each wheel and work with opacity to achieve the effect you want, I think you want many individual parts rotating around one of the centers (depending on what key you're pressing); and you'd save where everything is after each rotation, so that you know what to target next time. In the pen, I'm using classes to do just that. Here's a quick example, hopefully you can figure out the rest Also, I don't know if this is a trend or what (it happened to Sahil just a few days ago), but there is no need to send private messages to people to say you posted something in the thread. Users receive notifications by default when new content appears in a thread they've participated in, and if they turned off those notifications they probably don't want to receive messages. This forum is a source of voluntary help and personally any private message I get makes me less willing to contribute to a thread, not more...
  5. Hi lisartur, Just to make sure I understand, could you post a picture of what would happen if I pressed 3, after the second image above? (so, from the starting position, pressing 2 then 3)
  6. Here's a small demo of how to start/stop animations on focus. The sphere on the right has a bit more advanced implementation.
  7. I'm not sure what we should be looking for here. The software you're using just demonstrates the fade-in and fade-out animations of the various elements when you select them. Unless I'm mistaken the actual live website wouldn't behave this way, the animations would only be triggered when you ask them to via JS or maybe with something that comes built-in with that software... I can see two things you might be trying to do, please let me know if either is correct (or if they're both wrong): 1) you want animations on several elements, and you want them to loop indefinitely without stopping when you select another element... in this case, you would just set repeat: -1 in the tween's vars, like @Sahil mentioned above. or 2) you want different animations in each element, and you do want each animation to stop when you select another element; in that case you'd need to detect that a different element is being selected with some JS, either with a mouse/pointer event or a focus event, and when that happens you pause() the previous tween (and you can also use seek() to jump to the start or end position), and resume() the new one.
  8. If you edit your first post, you should be able to change the title. Do you have a link to the particular effect you're trying to achieve? Slider Revolution does a whole lot of things, it's hard to understand exactly what you're aiming for and why you would need to remove CSS properties. (Not that you can't do it, as @Sahil and @PointC have said, it's just that you might be taking a suboptimal approach without realising )
  9. In your particular case you could also just call fadeuptl.seek(fadeuptl.duration()) before .kill() so that the animation is moved to the end immediately. I don't know what you're trying to achieve, but another solution could potentially be to toggle a class on the element you're animating, and have !important CSS rules in that class that will take priority over the styles set by GSAP. (Not sure if this is good practice, though.) As a side note, saying a product sucks on that product's support forum, as your very first message, might not be the best way to get help with a particular problem – good thing the GSAP community is extraordinarily nice...
  10. Of course, I totally see what you mean. I guess this is all linked in a sense; the fact that I came to GSAP expecting a more static animation platform and still sometimes forget to step out of that way of thinking, that I come from games where if you say "move this object towards the cursor" it reevaluates that by default on every frame, etc. Regardless even though I sometimes wish for a way to create tweens that don't 'cache' values, I also completely understand what you're saying, and like I said I knew all of this is possible to do, even if it means taking a few detours All the more reason to really strive to make it clear to newcomers, from the get-go, that it can all be super dynamic and there's no need to be trapped into a mindset of needing to declare everything at the start and then not touch it anymore! "Tween.to(el, 1, {x:"+=10"})" doesn't mean "create a tween that moves el by 10 pixels" but just "move el by 10 pixels" and you should be able to do that as often as you need without feeling bad about the fact that you're creating one-time tweens or somehow polluting the browser's memory, haha.
  11. 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...
  12. Thanks Sahil and Jack, I'll try all of that!
  13. 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 https://greensock.com/gsap 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 https://threejs.org/ or http://animejs.com/, 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.)
  14. 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: https://gamesforfriends.club (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
  15. 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...)
  16. 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?)
  17. 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
  18. 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)
  19. Aaaand a fancy new pen and now I'll stop spamming this thread. Thanks again everyone for the help!
  20. 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.
  21. 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); } ?)
  22. 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! ? )
  23. 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.)
  24. 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: https://github.com/jashkenas/underscore/blob/master/underscore.js https://github.com/lodash/lodash/blob/master/debounce.js 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