Jump to content
Search Community

Dipscom last won the day on July 21 2022

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,640
  • Joined

  • Last visited

  • Days Won

    62

Everything posted by Dipscom

  1. From my point of view, having Steve Schoger as a twitter follower earns you three letters of the ACE definition of a designer. You now have a lot to live up to in my eyes. There's no harm in learning new skills - a bit of practice and you'll turn into the fabled design/developer unicorn! Oh, and you do like your fonts, don't you?
  2. If you meant that I don't have a laugh when I am doing development work when you said I did "serious dev work" - You're pretty spot on. I am usually a ball of stress and in a hurry. The very few times that I am not doing development for work, I do have a bit of a laugh and some fun. I'm glad to hear you've found a solution to you issue. I did have a quick look at the Vue3 docs and, there's plenty for me to read there, right now is not a good time for me to delve into YET another thing. Regarding have a chat, by all means, let us arrange something, I'm not the top dog here but I will enjoy talking about what we think is the best approach to certain challenges. Who knows? I might come out of it with ideas and examples to put in CodePen for a portfolio. You say you're a noob when it comes to programming, do make my day and say you're an ace designer.
  3. Hey there! I hope you can appreciate it is quite hard to help troubleshoot blind. Can you give us some context? Can you create a minimal demo that replicates what you are doing? Otherwise it is a guessing game from our part, which is not really a great use of our resources as there are some many hours in a day for us to help everyone that comes by. There is guidance in the docs on how to use bundlers and GSAP - https://greensock.com/docs/v3/Installation.
  4. Alas I do not. Not only I am a rubbish designer and do not have a personal site online - most of the stuff I have worked on over the years is behind a paywall or the code is in a private repository or it was a short lived campaign that is now offline. I'm happy to have a chat and nerd around Vue if you fancy, maybe I have some opinions on the things you want to ask? Send us a message and we can look for a convenient time to chat.
  5. Well tailbreezy, your title is a tad misleading because the issue here isn't to do with parent/child is it? It's to do with the router in between your components. I have not have the opportunity of working with Vue 3 yet (kind of in the lookout for a contract who'll let me do it, wink, wink). BUT, I do have some comments: Usually using watch is discouraged by myself and a few pals because it hides away the logic flow. We're all on the trigger an animation based on a method call or user interaction, not from a reactive side-effect. I had a quick look at the Vue 3 docs just now - correct me if I am wrong - but are you not able to accomplish what you want/need by nesting the <transition> element inside the element displayed by the <route-view> and add the "appear" directive to trigger the animations? I might try to give it a go over the weekend if I find some spare time. If you want to make double sure I try something, set a minimal demo somewhere I can fork and edit.
  6. And I was going to put down the tools for the day just now ? Let's see if I can be of help.
  7. Ops... Not enough checking before posting.
  8. Hello TomFawcett64, Welcome to the forums! See here how the current GSAP syntax is meant to be, also note that it is recommended to use "x", "y" instead of "left", "top". const tl = gsap.timeline(); tl.fromTo( to_target, { left: "-100%", top: "50%" }, { duration: 5, left: "0%" } ) .fromTo( to_target, 0.5, { height: "2vh" }, { duration: 0.5, height: "90vh", top: "10%", onComplete: function () { done(); } } );
  9. Hello a.joshi84, Welcome to the forums! What you are asking is no small feat. It's not particularly difficult but it does require a good deal of planning and orquestration. The way that animation was created is a series of several different smaller animations all being played one after the other as the page is scolled. The only hard thing is making sure your animation is setup correctly so that all the different elements land exactly where they are supposed else the illusion is broken (In the case of the link you sent, there's a point in the animation where the lady's avatar does not quite land where it needs to and jumps from one place to another). My suggestion to you is to create two or three separate animations as a test in isolation. Then, copy them over to another test where you orchestrate them together with ScrollTrigger.
  10. Hi jlnsrtr, I am not sure I follow your concern here. I can understand you do not want to re-create your animation frames as sprites - that's fine. But you should really be able to use the same concept you did on your code above. Having said that, I would not recommend replacing the image src on your tween update. That will cause the browser to do a bunch of recalculations while you're animating because you're replacing the element. I would recommend you load all of your image frames on your container, hide the frames not being used and just toggle their visibility as needed. If you, like Zach said, make a minimal demo with what you are trying to achieve it will make it a lot easier for others to jump in, do some small edits on your code and make suggestions.
  11. Hello nonoumasy, Welcome to the forums! I wouldn't say GSAP is After Effects but with code. I will be pendantic here a bit just for the sake of being... After Effects has its own scripting language so, it has code. GSAP is only a tweening engine (with some extra plugins for some extra magical feel) so, it is not comparable with After Effects. Now, if you rephrase your question to: "Can I use web technologies to create the animation like this using GSAP as the tweening engine"? The answer is: Definitely. It will be a mamoth task, no dobut. But is totally possible. You will need to use a fair few different tools and APIs to achieve that. SVG, JavaScript, Web-audio API... So, yeah, jump off the cliff and create an amazing animation for the world to see. We'll be here to assist you with any GSAP related question you might have.
  12. If I may interject: The issue here is to do with how efficient Vue is when updating the nodes. By default Vue will only re-render what has been changed. In this case, only the inner text is being changed. If you look at the state of your application with Vue dev tools, I bet you can see the string updating correctly. No animation can be triggered because there is alreay a bunch of other things inside your element - all the divs that SplitText created in order to do its magic. What is missing is for you for manually tell Vue to re-render the whole element you need and then, you can apply a new SplitText. The easiest way to achieve that (and the recommended as far as I know) is to add a unique key to the element and change the key as you update the text to be displayed. See here a simple example: https://codepen.io/dipscom/pen/yLajpVE
  13. It is understandable, don't worry. It's a very fine line to walk when deciding when to create a new thread and when to use other ones. Usually, you should create your own mainly because it's your question and your answers. It's good to chime in on other's threads but, as a whole if each thread deals with a single question, everything is much more clear to anybody reading rather than going over pages and pages of different discussions going on different directions. Also, threads that have been quiet for over a year are better off left alone. It's likely that there's new information that you will benefit if you ask a similar question rather than resurrect an old one.
  14. Hello BetteHoward, Have you looked into ScrollTrigger - This is GSAP's plugin for scroll-linked animations. Have a look at that and make a new thread if you get stuck on something, we will be very happy to help.
  15. Hello jchensor, Welcome to the forums! Firstly, I understand your reasoning but, it is better to create your own thread over reviving one that is been idle for several years. Even if it appears they deal with the same issue. Things change with time and the solutions might not apply, In this case, there has been a major update in GSAP. As for your issue, do you think you are able to create a small reduced case example? I am not sure what could be going wrong in your situation. I have no experience with XSplit but if you say you do not get the issue if you put the relevant code in a browser, there isn't much room left for any other conclusion other than the issue being with how XSplit handles DOM elements. I added a call to a .reverse() at the end of the sample pen you linked above at the timeline's onComplete callback but saw no issues. Presently I am unable to replicate your problem.
  16. Dipscom

    GSAP and Svelte

    @Sae Woo it turns out that we can simplify your approach even more and there's no need to use the header script either. I've updated my own examples: onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon). Thanks for bringing that to my attention. Learning everyday. EDIT: Upon further testing, it appears you don't even need the import gsap from 'gsap'; line for GSAP to be included in the RELP. That truly is black magic to me. ?
  17. Dipscom

    GSAP and Svelte

    Nice one Sae Woo. I'll be using that for my own experiments.
  18. Dipscom

    GSAP and Svelte

    Ah, state machines. It's been on my reading list for so long... I am yet to get my hands on it and try some implementations. Share whatever you can, it's great to see how other people approaches.
  19. Dipscom

    GSAP and Svelte

    Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon). Hope this helps.
  20. Nothing from the top of my head that is similar to that, no. Sorry. But search around for the basics of coding physics and you'll be halfway there. The nature of code is a great book - not really physics but a worth the time. https://natureofcode.com/
  21. Hi dolzsky, Welcome to the forums! These liquid effects are created with canvas. This one you are referring to are based on hit-area detection while the mouse is moving, some fake physics simulation and a little bit of trigonometry. GSAP can definitely help you with that but you will still need to understand the underlying principles that drive it.
  22. Dipscom

    GSAP and Svelte

    If you try to have a go and get yourself stuck, let us know. And remember you can get bind a reference to the DOM element with: <script> let reference; </script> <Element bind:this={reference} />
  23. VS Code has some magic in it and it will add import/require declarations on top of your files if it thinks you need/want some.
  24. Hi Carolina, I have worked on scroll-based animations in the past, yes. I have no experience with Angular, I am afraid. When you say your pages are not responsive, are you refering to whether they respond to the size of the viewport or to the user interaction? The memory consumption will, likely, be your Javascript. There is bound to be a memory leak somewhere there. I'll go back to my original comment - If this is a product explanation page, do you really need a javascript framework to put it together? Removing as much javascript as you possibly can will improve the performance and probably the memory usage. The way I see it, all you need here is a static page, GSAP and the ScrollTrigger plugin. Bare minimum JS to only control the animation you want as the user scrolls down. As for help, what type of help are you looking for? Are you looking for a GSAP specialist? Or a performance specialist? Or an Angular expert to help with the memory issue?
  25. I've just re-read what I wrote above and would like to say that if that is coming across as unfriendly, I apologise. I do not mean it that way. I mean to say there is plenty of room to improve by optimizing the images, removing unnecessary ones, replacing others with live text and considering if you need as much javascript as you currently have in your page.
×
×
  • Create New...