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. Hey RolandSoos, Sorry for the disappearance, deadlines, babies and general life, you know... Gotta earn that bread else, I shall starve. So, for all intents and purposes we can all agree this is some sort of float rounding error - At least this is everybody's best guess. I still have difficulties reproducing the double callback but I have spotted it once so, we'll go with it happening. My question to you is: do you really need to create one big timeline that holds all of those animations and has to account for so many variations? Can't you just create/update a timeline whenever the conditions change? In general it is pretty cheap to create and overwrite timelines. I know you said in your real application everything is more complex but still, I fail to see why this would need to be one single big timeline. Have you considered having your system create tiny timelines with onComplete callbacks that ask a central state manager for the where to go next?
  2. Something's definitely going on here, I did see it once. Right now I am knees deep on something at work and can't spare the attention but I'll come back and have a think at some point... Maybe someone else will have a suggestion in the meantime.
  3. I can't autoratively say if it is or it isn't a float rounding issue. It certainly smells like one from what you are reporting and from looking at your code. When looking at your pen, I had it running for a while and reloaded it a few times myself. I only managed to see that repeated "pause at IN" once. And I have changed the smallPosition to be '+=0.0000000001'. It got so small that I started seeing the onStart callback again. But not the double "pause at IN". Maybe it is a CPU/Browser issue? Whereas some combos the error occurs more frequently than others? My initial thought was that it was the setTimeout() that would be messing things up but I don't see how it would be the case. I know the setTimeout() will fire even when you don't have the tab on focus but not sure how that would cause the call for GSAP's callback to run twice. Out of curiosity, will your system run over those empty pauses automatically? If not, I don't see how it matters how long the whole timeline is because, the user will not be able to click fast enough for that to matter. Have you tried to play devil's advocate to your concept there and see if you are not overengienierring this bit of the logic?
  4. I'm not clear what you need to achieve but, I feel you could have all your addPause() calls lined up nicely if you were to always offset them by "+=0.01" relative amount of time. Then, they should all trigger, one by one and you should see no different in the animation as the amount of time they would add to the total timeline is negligible.
  5. It is extreme in the sense that you will be styling the tag in the most specific manner possible. Depending on the size of your project and the number of people involved in it, you don't want that sort of specificy as it makes overriding the style very cumbersome. A less extreme version of this is to have a <style> tag inside your HTML with the desired visibility rule targeting the necessary wrapper tag. Another step up from the extreme is the external <link> to a stylesheet but making sure it gets parsed before the HTML. By the way, well done on your discovery. I find it super satisfying when I am stuck on a problem and eventually I figure out the solution.
  6. I'm on a phone riding a train, so, much limited on resources here. Giving a total shot in the dark as I've not even seen your code. Your CSS is somewhere that is taking a moment to load. During that moment your content is showing. The more extreme solution here is to add a inline style to your wrapper tag and set it's visibility to hidden (which is better than display:none for a few reasons). That will guarantee the visibility being parsed before the wrapper tag is rendered. GSAP should then, be able to pick it from there and make your life easy. ;) As for your aside, I am not sure what you are asking or what you have done. The safe bet here is to have the CDN link pointing to TweenMax as it will cover the majority of the tweenies needs cases. The kilobytes you save by trying to only load the lite versions is so minimal that is not worth the trouble (plus, puling one TweenMax bundle is better than three or four separate lite bundles from the CDN).
  7. Hi RolandSoos, I can't go over all of your issues in one go (my lunch break is only so long) Ops, someone got carried away and is being naughty at work... Problem #1, you said yourself, you are turnning off the supressEvent thus, whenever resolve#2 is clicked, the virtual playhead jumps from the second addPause() all the way back to time 0, passing over the first addPause(), triggering its callback. If you leave the suppressEvent turned on, you will have the behaviour you expect. Pause 1 -> Pause 3 -> Pause 1 -> Pause 3 etc... Problem #2, as you know, the addPause is a "zero duration" tween. So, you are adding two pauses on top of each other at the exact same timestamp. But, when the playhead hits that timestamp, GSAP only fires the first callback as it is based on a onComplete callback. The second addPause() never gets a change to run. When the user clicks on resolve #1, the playhead moves from that timestamp but the second callback is not fired because the it sits at the exact timestamp so, on the next GSAP tick, the playhead has moved away from it so, the onComplete call does not fire. If you were to add the second addPause with a miniscule offset, for example "+=0.01", it will fire when clicking on resolve #2. This example also has the supressEvents issue as responded above. So, you will need to adjust accordingly. Problem #3 builds on top of the concepts of Problem #2, the addPause is sitting at time 0 but it never runs because the timeline is already set to paused. Given that it never runs, the .then() part of the promise never gets initialized and thus, everything else falls apart. The workaround is the same as before, have the addPause() sit sligthly offset from 0, say 0.001, and things should work as you expect. Problem #4, is regarding the supressEvent, that you are disabling. Again, the addPause works off a onComplete call. The callback is firing in this case because you are removing the supression of events when the playhead is scrubbing around, not playing. When you set the timeline to play from 'test' onwards, you're scrubbing the timeline from 0 past the addPause() and then, GSAP starts playing from the label. The callback is fired because no events were supressed. Problem #5 is on the same vein as #4, where you are turning off the supression of events and scrubbing the timeline over those events thus firing them. Ultimately, the behaviour is as expected, but only IF you understand the callback in addPause() happens during a onComplete(), you cannot stack several of those on top of each other as only the first one will fire. You also need to have in mind the concept of "tick" in GSAP, where certain things happen at one "tick", then the playhead moves to another time position before the other "tick" running. Hopefully, this helps clear out your questions and you will be able to adjust the code to suit your needs.
  8. You know, I never got around to checking this plugin out... Shame, shame, shame...
  9. Great to hear you got it working. And I hope you understood why Blake's code work and yours didn't.
  10. Did you see Rodrigo's comment where he pointed out that you have your onStart call inside the pixi:{} config object? That's not meant to be there. If I move it outside the pixi config object and put a console.log call into the onStart, I see it fire according to the delay as expected. Your problem here is not with GSAP but with JavaScript scoping. You are asigning new values to the same variable and because it's the same variable, its value gets updated every loop call. So, you think something's wrong but it's not. It's expected behaviour. What you want to do is create a brand new variable inside the for loop to store the values you need. So. Instead of: for (k in js1["slides"]) { // Wrong way to set these variables up v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; } delay: dur, ease: Power2.easeOut }); } You need: for (k in js1["slides"]) { // Wrong way to set these variables up const v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; const textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); // You will also need a new "text" reference if you are planning on having two lines appear staggered TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; console.log(textTitle) } delay: dur, ease: Power2.easeOut }); }
  11. Hi dazzafact, Welcome to the forums! Could you provide us with a reduced case example? It's very hard to troubleshoot blind. You speak of runing a loop for a video slide show but, I am not sure when this loop is being called, what else is happening at the same time, where you are setting your tweens. I also see a reference to the pixi plugin and so on. There are too many variables here, not enough for us to help you with. We suggest making a demo in CodePen but any online editor is fine as long as we can tinker with the code and see the bare minimum to reproduce your issue. In case you need help with CodePen:
  12. I know that demo, I've read over its code and took it apart at some point in the past. It runs off shaders and as Carl has said, it's not for beginners. It was not designed to work out of the box by simply creating a new Slide. You will need to tinker in the code that informs the shader what to do as well as the calculations to break apart the images and which image to show. If this is your first attempt to work with ThreeJS, you will need to dive into shaders as well The Book Of Shaders is a great starting point even if it is an unfinished book.
  13. Dipscom

    SVG animation

    This affirmation is not correct, is it? You don't mean when you click twice in the same button. You mean when you click on a button A, then click to go back and then click once again on button A. Now, how is this new question any different from everything we have been discussing here? Go over your code, line by line, read and understand what each and every single line is doing. If you can't understand what the code is doing, go and take a course on basic JavaScript because you really need it. I will give you a hint to solve your issue: you need to remove ONE line from your code and it will work. I will not tell you which line it is.
  14. Dipscom

    SVG animation

    FreecodeCamp has a ton of material to get you from start to finish, not only on JavaScript but in general web dev plus more.
  15. Hey Jp! You set the bottom to be 100vh, not the top. #pub-anim img{ position: absolute; bottom:100vh; } As far as performance goes, DOM element-wise, that's pretty much it. The only way to get more performance is to move those elements inside a <canvas> and run a ton of those calculations on the GPU. But, if you only going to have a dozen or so cats, you should be ok.
  16. Dipscom

    SVG animation

    I ask you, where in this code snippet are you changing the state?
  17. It doesn't continue from the wrong value, it does exactly what the code is telling it to do. You see, the first tween you create has no idea of what the second tween is doing so, once the second tween is done playing, the first one continues doing its thing as before. The values calculated in the first tween do not get altered by the second tween. The values on the second tween, however, are influenced by the first one. Refer to my first suggestion as to how to approach what you are trying.
  18. What is the effect that you are after? What do expect to see? You can't move the image without moving the mask, they're glued together. You can move the element you have inside your mask, and that will give you the impression your mask is moving. However, if you want the mask to stay in place and the image moving underneath it, you will have to wrap the image in a <g> element and move the image inside it. <svg width="360" height="233" version="1.2"> <defs> <mask id="maske"> <image width="100%" height="100%" xlink:href="http://motionlove.co.uk/banners/test/text_1Mask.png" /> </mask> </defs> <g mask="url(#maske)"> <image id="text1_img" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" /> </g> </svg>
  19. Well Baris, be prepared for a lot of studying if you are going to try and animate stuff inside the <defs> elements - There's all sort of potential bugs there. Another thing, you really should be able to just put a url into your posts without errors. Just try it, yes? The animation is behaving as expected. That is because you are applying a mask to an element with an id of "text1_img" and then moving the masked element. If you want to move the mask and not the masked image, you need to target what's inside your mask. Not the mask itself, mind you.
  20. Dipscom

    SVG animation

    If it's not stopping that's not the path you should be going down. You are trying to overcomplicate this. The answer is much simpler and has nothing to do with the actual timeline, it's the concept of state. Your animation has two states, doesn't it? One is open the other is closed. Now, refer back to what PointC has explained and the code that is there as an example. What do you need to write in your onReverseComplete function so that your state changes? What in the doCoolStuff() function prevents the timeline to be created repeatedly?
  21. Thanks for understanding Baris. We do try and help everyone here as much as we can.
  22. Eh? Sorry but you seem to be contradicting yourself here. Your initial question and the title of this thread is about moving an element on Y, not about SVG. I hope you can understand that we have limited resources here and thus, must keep this forums GSAP focused or we will be overwhelmed. We can't offer troubleshooting general SVG, JavaScript issues. We do, of course, help out as much as we can and share as much knowledge as we have. In your case you have nearly 100 lines of HTML code, close to 500 lines of CSS and over 200 lines of JavaScript. That's definitely not a reduced case example. Places like StackOverflow is where you will get help with more generic questions as to why your SVG is not displaying.
  23. Hey Baris, I've edited your post to contain a live link for ease of use. I have also looked at your example pen and must say that is far more than a reduced case - There is a ton of irrelevant code in there for the issue that you are asking. If you can remove the stuff that is not related to your question, it will help a lot as we won't have to wade thru a ton of code to figure out what might be going on. However, I think I can understand what you want to achieve. The way I would tackle it would be having a parent <div> that holds all of your elements that are slowly moving upwards then, I would target the individual child element with the extra 20px jump. That way, you will have your constant movement upwards as well as control to make the children jump up whenever you need.
  24. While I agree the 'flag' option is not the 100% most wonderful way to go about it, there's the issue that if you have an infinite tween inside a timeline, the playhead will never go past that tween so, there isn't really a way to have the timeline call another method beyond said tween.
  25. I haven't worked with Celtra in years but they used to not support external libraries at all. Celtra is a full adBuilder and deployment system. You would build the whole add inside their system and only work with the components they made available and some vanilla JS. There was some talk of them supporting external libs at some point but I don't know if that ever went anywhere.