Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. They do play together. As it is what my mate uses on his sites WP sites, with GSAP.
  2. You, my friend, will need to step into the wonderful and mesmerising world of MATHS. Have a look at this channel by Keith Peters, it will teach you tons about calculating physics-like movement. https://www.youtube.com/user/codingmath
  3. Oh @Carl you just robbed me of a chance to earn more brownie points... I'm trying to collect enough of them to trade them for a slice of miss Dodi's cake.
  4. Hey @mdelp, Firstly well done on getting something working with your setup. I am sorry to rain on your parade but I very much doubt you will be able to easily trigger js based animation using Animsition because it is designed to trigger CSS animations. You'll have all sorts of conflicts with both approaches trying to wrestle control of the element you try to animate. Also, to rain even more, you will have to deal with AJAX or the whole page will reload every time you navigate to a different section. You could, hijack the click, run a transition-out before triggering the navigation, load the new page, have the loading animation kick in then run a transition-out to reveal the new content. But as you can see, it's a fiddly process of several steps... And you'll be reloading the whole page rather than just swapping sections of it. I have heard of a JavaScript library specifically for page transitions - I have never used myself so, not vouching for it but it was a colleague who, like yourself builds all his sites off WordPress so, I know they would work together. http://barbajs.org
  5. A reduced example would go a long way to help solving this mystery. A cursory look of the example code does not yield any obvious issues. I'm working on the assumption you do not have both of those loops in the same block of code. Also, I would move the getOffsetValues outside the looping blocks, there isn't a need for them to be there. You can just pass arguments to it. I don't have the spare time at the moment to set a test up for you but I will be more than happy to come back and have a look at any reduced case you might have.
  6. I wouldn't say no to being taken to taste one of those cakes from miss Emma Dodi.... I'll be in London tomorrow and thursday...
  7. That is correct. That could be the issue Joe was remediating with his onUpdate technique. Sorry, only now it clicked what you are reporting. I can see that the blur itself is not tweening but simply toggling off at the end of it. I don't know what's going on from the top of my head. @Jonathan is really knowlegeable regarding browser quirks, maybe he'll stop by with some info. Otherwise, someone else might know. Last-ditch hope is that I will sit down at some point and look into the matter (don't expect a miracle cure, though).
  8. The feeling is mutual. I really don't get the 25 and the 100... What are you counting? What is the 25? And the 100? Why do you need to pass 25 and 100 into the function? If you want to pass more than one value to your function, then you will need to amend your function to accomodate it. Do you want the 25 inside countItUp to be a param? You need to alter your function accordingly. // If your function isn't set to receive more than one parameter then, it won't do anything with the extra params function countItUp(numb, interval) { var secondsLabel = document.querySelector(".js-count-up"); var totalSeconds = 0; // If you want to use either a given param or a default value var intrvl = interval || 25; var countdown = setInterval(function(){ totalSeconds++; secondsLabel.innerHTML = totalSeconds; if (totalSeconds >= numb) { clearInterval(countdown); } }, intrvl); } // Then you will be able to pass two values in your onStart tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp, onStartParams: [100, 25] }); Be careful not to be invoking the method when defining the tween // this bad // it will fire immediately, not when the timeline's playhead starts playing this tween tl.from(countUp, 0.6, { onStart: countItUp(100) }) // you need to pass a Params as well tl.from(countUp, 0.6, { onStart: countItUp, onStartParams: [100] }) Notice how the Params is an array, it is so because a JavaScript function can have any number of arguments and therefore, Params must be able to accept any number of items.
  9. It is not mandatory to use the callback. If I remember correctly, the reason why Joe did that was because, at the time, there was an issue with how the filter was being rendered and something was bugered up. It's fine to use just the CSS plugin. Just make sure you test on the browsers your target audience uses the most.
  10. Passing params is simple, from the docs (https://greensock.com/docs/TweenMax) (in the gray box): So, in your code you would do something like: tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp, onStartParams: [100] }); I make no recomendations. I do not criticize jQuery. It has its place and applications. It is just that when I started back into web development, I was working in banner development and we cannot afford libraries that are not 100% required. GSAP is, otherwise no animation. jQuery not because as @OSUblake says: 'http://youmightnotneedjquery.com/' So, nowadays I'm just more comfortable without it than with it.
  11. Why do you call it on line 72 and then again onStart of your tween? What is that function trying to achieve? One call you pass a param, the second you don't.
  12. Is your initial pen the one that's exhibiting such behaviour? It would be good to be able to see the code.
  13. How deep do you want to go down in this rabit hole? The least complicated is to have a global object that would be your manager. Have it emit events whenever something is done and use listeners to catch those events. If you want to go full on hipster-dev get your head around React or Vue, they have state management plugins that would help. Disclaimer: I'm totally biased towards Vue.
  14. Ok so, I had a quick skim over CCapture's intro page and saw that it calls a render() function so, in theory, you could do as I suggested. Have your animation paused and on each call to the render() you move it by one frame.
  15. You can disable GSAP's use of RaF and set a fps with the .ticker - I mean, do you know for a fact that is is running dead on 30fps? Otherwise, the only way I can think of is if CCapture has a way to trigger a callback on each frame. Then, you could pause your animation and write a helper function to make it step one frame each time CCapture calls.
  16. Have you considered using the .ticker property? https://greensock.com/docs/TweenLite/static.ticker
  17. Hi @mdelp, Welcome to the forums! GSAP is a Tweening library, it will interpolate values of any JavaScript object ( and a bunch of other stuff thanks to plugins). It does only that. It will handle the animation (tweening) bits of what you are after nicely but it will not handle the loading of other assets or managing states or anything else that's involved in page transitions. What you are after (page transition) sounds pretty simple but it is acually a combination of several moving, and independent, parts that together makes is not so simple in the end. You can definitely use GSAP for animating the transition, triggering a callback to load new content and animating the transition in reverse after the content is loaded. You will need to to the loading and state management yourself (or with another library). Hope this helps. Happy Tweening!
  18. Dipscom

    Particle Ball

    @OSUblake my love/jealousy of you unhuman ability to be here, catalogue and remember information never ceases to increase. Please never reproduce, there would not be any webdevelopment work left if there were more than one of you.
  19. How did I not come across this before?!?!? Must set aside time to deconstruct this plugin and understand it. MIGHTY CODEGOD! WE THANK THEE BOUNTIFUL! *bow*, *bow*, *bow*
  20. Hi @smallio! The best questions are the newbie questions! How else would beginners benefit otherwise I think I get your question. To pass a callback inside a callback, you need to have a reference to the said callback to be nested. Looking at your code, I struggle a bit because it seems to me you're using jQuery, not a criticism... I don't use it and get very, very, very confused with it as it has a lot of functionality that I am unaware of. So, help me out if I write something here that's wrong or you're already aware of. Side comment, what are all those libraries you are loading in your pen? Do you need them all? Again, sorry if I am missing something, I'm just trying to predict behaviour based on the libraries. Anyhow, back to the theory. It should be something as simple as: Mind you, there are several other ways of doing this. They will vary depending how you want to structure your code, handle scope and whatever library you are using. ps: Nice transition.
  21. OooOOOooo! Gossip! ! ! ! It ain't me so, now I'm curious!
  22. Hi @simonb, Welcome to the forums! There's going to be no end to talented individuals and agency teams here. You're in for a ride I'm a freelancer myself, based in the UK. Here's some work from last year - you might notice a theme with these as this one client kept me busy for most of the year https://flowers.penhaligons.com/ http://www.penhaligonstimes.co.uk/ http://mysterymansion.penhaligons.com/ - (notice: has music)
  23. Hummmm. I've got no idea what game is this that you are refering to. I do have a vague impression of what you are trying to achieve. From what you are describing, nothing springs to mind as a way to update the perspective-origin in this scenario. However, what does spring to mind is the question: Are you using the right tool for the job? Would you not benefit from a different setup? Or even a different technique? If you are going to recreate a game and want to use 3D perspective, would you not be better off with a library that's designed for that? You could try having your '#tableContainer' not moving, that would stop you having to change the perspective-origin but that would mean you having now to translate all the children inside it. So, maybe a 3D specialist library?
  24. Hello @krs! Well, I wouldn't claim that as being 'pure css' as you're toggling the classes with jQuery. There are dozens of ways to animating all divs when one is clicked. You could target a specific class they all share, target all divs that are children of another, or any other way you could think of. But taking the example you have given on the previous post, I've made the following, see if that helps: