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. I did a bit more reading and found some possible leads. But I would say a few things first: The thing with plugins is they are brilliant to do what they are designed to do and a pain to do what they are not designed to do. I am not proffering any judgment here about blend4web at all, just mentioning the nature of plugins. The other side of the story is, creating custom solutions yourself is very time consuming. It might be worth if you are going to be reusing the solution you create over and over again. There are other questions as well. The blender elements, what type of animation are you thinking of using? Going down the self-built custom route, you will not be able to create the animation in Blender and reuse it out of the box, you will probably need to recreate big bits of it yourself after export. Back to the blend4web. They have an API, there is a way to embbed your content without having an iFrame, they appear to have a callback for when the animation created in blender is finished. So, in theory, you could, set it something up where you create the animation in Blender, export it using the plugin, have your GSAP timeline pause when it comes to the 3D section, wait for the 3D animation to complete and continue automatically after it. I really don't have the time to set something up right now, if I find some, I shall try to see if I can make it work. Otherwise, have a look at blend4web's tutorials and documentation, this is certainly more of a blend4web question/problem than it is a GSAP.
  2. Hi stijns96, Welcome to the forums! Yes, well, you've answered your own question, you want to join the two animations in a timeline to be triggered by ScrollMagic. I've only done it in one of the skills. It's your homework to work out how to port it so that you can have the count on all skills.
  3. Having a tree way conversation is hard... I have comments on both of your responses. I think you've misunderstood him, Jack. I think he is saying he deliberately has not included the logic that removes the annotation for simplicity sake. Which, in turn is causing the two of us to be confused as to why have a 0.04s tween that then on completion gets rid of itself. It's a live video, I will assume it's like TV, no scrubbing, no pausing, no control. It just plays its thing. His own words bellow. Now, mr. QA, your turn. As much as you have been trying to be clear I think your attempts to simplify the example has caused more confusing than has helped. Give us a bird's eye view of what exactly is that you need to achieve. Here's my interpretation: Live streaming of a video. Somewhere someone inputs an annotation and saves it on the server (how one would know ahead of time what to write on a live video is beyond me but, let's carry on). This annoation shows on screen for a set amount of time (surely not 0.04s). Afterwards it disappears. At some other point, another annotation is created and the cycle restarts. If this is correct, the following questions apply: Why create a timeline that holds the entire video? Unless the premise of it being a live streamed video is incorrect. How does the annotation know when to go away? What do you mean exactly when you speak of animation (see the quote bellow)? The animation ends after 0.04 seconds (one frame in your video fps), so, it's nothing but a blip on screen if you follow your own description of desired behaviour. With the assumptions made above one can recommend the following: There is no need to have a .to() tween of 0.04s. You can use a .set() tween, as you seem to be using GSAP to position your annotation on screen, not actually animate anything. As Jack said, you probably don't even need 500 DOM elements to hold the annotations. Only the maximum number of annotations that will ever be on visible at one time. If that's one, you only really need a single DOM annotation element. You should also use 'autoAlpha' over 'opacity' as it will toggle the 'visibility' property as well as changing the opacity, decreasing the amount of work (as minimal as it will be) when working out what's not to render. If the annotation is to show up, hold a set (the same) amount of time and then go away, you are better off creating a factory that will create a timeline with such behaviour but nothave it attached it to a reference, thus, flushing everything once it has run. Ultimately, the question posed in the title of the thread has been answered. We've shown you how to hide the element as soon as the tween is over. However, it is clear that is not your issue but something completely different. Again, help us understand and we shall share with you any ideas, techniques we have.
  4. I did miss the opportunity to mention that is always an honour to be dealing with individuals who have a vocabulary so refined. Specially when sentences using words such as 'enthused' are followed with others containing 'nifty'.
  5. This Blend4Web is a much bigger thing I thought it was. They seem to have an API and web player as well as its own library. They have an API and all sorts of things (which I did not read into yet). There might be a way to control assets from the outside. I am a bit swamped today to try and write some tests so, let's stay in the theory for now. Why do you need (want?) to animate elements exported using GSAP? It appears the plugin gives you the ability to bake in animations and gives you mouse/touch control from the get-go. In their examples, they show how to iframe the exported assets so, you could in theory, add it to your presentation using that technique. I think your issue is more familiarity with web and this plugin over GSAP. If that's the case, I can see if I can help you iFrame your exported assets into your presentation even though it is not GSAP related. We'll move into a private chat for that, though. I'll lose brownie points if we detour the forums from GSAP related dicussions. I'd follow ¯\_(ツ)_/¯ suggestion (jeez why? WHY? WHY? I can't tag you here with that username... -.-) and read over the links referred if you have any interest in learning about 3D in the web, they are very good resources. Speaking of which: Zero pressure, eh?
  6. You can always set the opacity of the element to 0 and use clearProps on it. But you still would have an issue of the time it takes to animate in, 0.04s, is so short that whatever you have on screen will be gone before the user can even perceive it. I am having a very hard time imagining a reason why you even would have an animation running on such short span of time. Help me understand it and I think we can offer more tips and ideas on how to improve it. There's nothing more performant than using opacity and transforms in the DOM. You could toggle the visibility as well to stop mouse events triggering but that's pretty much about it. What would concern me in this hour long video, with overlays being fired at 0.04s is how many elements you will have in your DOM tree... You might want to remove those after you shown them. Unless, of course, you need the ability to rewind the video as well.
  7. I've heard of that plugin, don't know much, though... Tomorrow I'll have a look at it if I find some time and I'll report back. There are certainly a few ways we can approach it, we'll just have to talk it over. Right now I'm off to bed. Bear with me and we'll work something out. For now, do two me about this presentation of yours, how are you putting it right? Is it an online presentation? Or is it something like PowerPoint?
  8. Just to reiterate, it can't be done inside Blender. You can export your models out into a web friendly format and use GSAP to animate them.
  9. Are you referring to Blender 3D as in: www.blender.org? If so, GSAP won't be helping you there. Scripting in Blender is done with Python, not JavaScript. If you intend to export your models and use them with ThreeJS or Babylon, or similar library then, yes, you'll be able to work with GSAP. How familiar are you with the world of 3D on the web?
  10. Hi Emily, For that sort of effect your best choice is webGL but unless you go on and write the shaders yourself you will be having to include a library to handle it, like Pixi or ThreeJS. You can, of course, still build it natively with just Canvas and the WebGL context but it will be quite hard and a steep learning curve. In another words, you are in between a rock and a hard place if you must get this effect going.
  11. I must not have aged well enough. I only seem to be getting 3 out of the 4 bonuses.
  12. There are other ways to figure out which element is over, the data attributes was just a simple, quick, way to achieve it.
  13. Well, I'm here, picking up whatever questions you and the other lot manage to let slip... Give us a few likes for the sake of it, then. ps: For someone without a child, you got a fine arsenal of dad-jokes.
  14. Let's figure out how I can feed a child now plus (in the future) a second one and I shall subscribe to your suggestion.
  15. Why would that be? That means the position would not suit a junior candidate.
  16. Hey bdrtsky, I think your thread title is a bit misleading as you are not doing much in your code other than setting up an event listener. What you want to achieve is a bit more involved than you might thing. You need to figure out which element the mouse is over before you can trigger the tween. For that, you can't really use the 'mouseenter' because it will not bubble/propagate, you have to use 'mouseover' instead and work out which of the elements you are over. Bellow is a way you can achieve your desired result.
  17. Hello QACollective, You can set a little factory function to generate your transitions and either fade out or clear any properties set by GSAP. Also, is much more performant to animate transforms (x, y...) over left and top properties.
  18. I can reproduce the bug in Safari, yes. For some strange reason, though, I get no errors in the console.
  19. Hey Rafa, I've just checked the link you are referring to and did not see any errors. What browser are you using? Have you got any extension that could potentially be blocking stuff?
  20. It looks schwwet, that's why. ?
  21. You can always use SVG filter effects as long as you are aware of the performance limitations. https://codepen.io/dipscom/pen/LbGazO
  22. Probably would be you drawing the lines in Canvas but not using DrawSVG, actually writing out the line commands and have them animated.
  23. Hi Sejabs, Welcome to the forums! We always ask people to provide a reduced case example to make it easier to help. In your example what I think you are trying to achieve is quite straight foward but I am not sure I understood your situation correctly. So, if you could show us what is it that you are trying to achieve, would be of immense help. For example, I have no idea what Chokidar is. Nor I understand why you need to watch a folder and add an image path to an array if you are already watching said folder. In regards to the GSAP specific bits, you are correct when you say the timeline expects all of its components to be present in order to do its job correctly. One of the reasons being it has to calculate the element's attributes before to tweening them. However, there are ways around it. One such way would be to have a timeline do whatever animation it is that you want, pause at your desired point, call a function that would animate the new image from the array, including removing the element from said array at the end of it and then, at the end of this other animation, the timeline would be told to continue playing. To me, it would be totally feasible. If I understand what you want correctly.
  24. Hi DAM, I am not sure I understand what you are asking for here, can you rephrase it please?
  25. Dipscom

    svg wave

    Hi DAM, I am not sure I understand your question here. Can you rephrase it?