Jump to content

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

Dipscom last won the day on April 28 2021

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Dipscom last won the day on April 28 2021

Dipscom had the most liked content!

About Dipscom

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

12,239 profile views
  1. Hi JONATHANMAYEA, I can see you have started up a new thread following Cassie's advice but this new thread has no new information that might help a potential freelancer gauge the work required and/or be able to provide you with an accurate estimate for the work or worse, even be able to judge whether they have the right skills for the job. I have looked the the website on the url you have provided but failed to see any significant animation. I understand you are looking for a professional to help you deliver and then, you hope to learn from the codebase you end up with. But, can you give any references to what is the end result? Can you show the exported Bodymovin animation? What do you expect GSAP to do? And THREE.js? These are three very different tools that CAN work together yet, at the same time, do not need to be together to work very well on their own.
  2. Fee-fi-fo-fum! I smell a nosy english one. Be them around, or be them offline, I'll grind them down to make my bread for stealing my thread!
  3. As to what pertains to your question. There are many unknowns. My gut reaction on reading your initial post is that there is something wrong on your setup. There is no reason a page would load work and the on reload not work. When you say your page works on load, do you mean, during your hot-reloading while it is in dev mode? Are there any errors on the console? Why are you using a loop to create an animation that is based on a component from its parent, while appearing to attempt to create one set of animations per instance of the component? Why not put that into the mounted lifecycle of the child component?
  4. Allow me to reiterate that: this is a public forum. Almost everyone that is replying to posts here is doing on their own time out of goodwill. Being a member of the Club Greensock does not change the level of help and support you get. If you want or need support from the makers of GSAP, they offer consultancy services. You can contact them directly and have a conversation about your needs. As for the requests for a demo, that is the minimum asked in the forums as you will be helping people help you to solve your question. As you stated, it takes a significant amount of time to set the environment up, then the conditions, then the logic. Imagine someone who's browsing the forums on their spare time having to do all of that for every question that is posted here.
  5. Hi JoaoJack, It does not need to be in CodePen, you can use Codesandbox, you should be able to set it up as a normal project. We ask for minimal demo so that we can see the context as there could be so many things influencing the situation that hours would be spent on only trying to figure out what the setup is. I, for one, cannot even imagine what could be causing your issue. Only that there's something wrong on how you are setting the code up.
  6. Right, I got something that might be worth you looking at. I assumed you wanted a shared timeline between the components that are driven by the scrollTrigger. There are some caveats because of component initialisation order and things existing or not on the DOM. The crutial bit is that I assumed you wanted to have each component be able to add to the timeline. For that they need to share a context, which does not happen unless you setup a store or you use getContext()/setContext(). https://svelte.dev/repl/d5226741fc304dbfbab2b35a7629c56f?version=3.38.2 I'm not too well versed on it to be honest, heck, I only had cause to use it today because of this question of yours. Hopefully I understood it correctly. In any case, have a look a the code, see if it makes sense. What I cannot guarantee is the order in which each of the tweens are going to be added to the timeline as I am not sure if the children components are instantiated in the order they are listed in the code or if it could be random. It should not matter in your case as everything is/should be dependent on the scroll position. ps: Also note you don't need to add imports to many packages in the RELP, it's smart enough to pull them automagically without the need to define script tags in the <svelte:head>
  7. Hello again! I have had a bit of a lookie. As mentioned, I have not had the chance to work with any of those things yet. Plenty of docs reading... The initial investigation has yielded that part of the reason is because smoothScroll is being initialized at the App.svelte level but the animation is being initialized inside the Hello.svelte. A quick and dirty workaround is to initialize them both at the same scope. I know this is not ideal, it's a first step. I would imagine one will have to set some sort of store to communicate between the components in order to have the smoothScroll at the top level and each component have is own isolated animation. For now I have to stop and "go to work". I'll try to find some time and play around with ScrollTrigger and this SmoothScroll at some point to see if I can work something out.
  8. Hello! No, I haven't had the chance to try any of that. It's a tad late now, let me get some sleep first. Tomorrow I'll have a fiddle around to see if I can work something out.
  9. I don't know enough about the inner workings of frameworks to utter an educated opinion on the matter. I'm not even versed enough on shadowDOM for that matter. All I can see in this discussion is that there are workarounds to the matter only people don't get a good enough grasp of the tools they use in order to be aware of them. If an option is wanted of me, I'd vote to ruminate on this idea a bit longer before making a decision.
  10. The duration property in GSAP is in seconds, the equivalent in Svelte is in milliseconds, hence the need to convert the values. I like GSAP, I like Svelte, I like talking to people who like GSAP and I like talking to people who like Svelte. I think I would like to talk about GSAP and Svelte at the same time. Word of warning, though, I have been knee deep on a PHP project with no animations so far, you will have to help me jog my memories on stuff. So, go ahead, make some RELPs and let's geek out.
  11. I've had a poke around your repository. What Rodrigo suggested earlier on: using a local copy of the script from your statics folder seem to do the trick. You forgot to convert some of your code to account for that, the IconButton.vue was still referring to the .tgz version. Changing that to use the static folder version has made the error go away. The test pass now when I run it. There are other errors logged but I think they are other things for you to take care of, the test itself reports as passed. Another thing to mention is that I see you have been using Yarn. I didn't, I don't have it installed and wasn't going to bother downloading it, sorry. So I used NPM. I don't know if that will be an issue or not, thought I would mention here.
  12. Thank you, I'll have a poke around at some point today and see if I can spot anything. Sybil, this repo does not seem to have a Jest test in it. Is this the correct repository? You were reporting having issues with the testing only.
  13. Are you able to share a minimal implementation of your project that recreates the issue? Rodrigo gave me a basic Nuxt project he setup that had some issues on it. I was able to work around those issues. Maybe we can achieve something similar?
  14. Hello again! I've done some looking into the matter. It appears to be a combination of a few things together. 1) I am almost certain the errors you are reporting are to do with the Node version. 2) Once you actually get past the Node issue, you'll get the test failing still because on your mount lifecycle there are calls to $refs. The test fail because Jest expects those to be actual DOM elements but as they are $refs, they are not. This is an issue on this test because this is not a E2E test, it's only a unit test. I have no experience with Jest, the only way I managed to get around this is to not use the $refs but use GSAP's own selector engine and IDs. For example: use "#myRect" instead of "this.$refs.myRect". It appears the issue is not with GSAP at all but the fact that the test is trying to compute DOM elements that are not present due to the $refs. Actually, all of my comments are based on a sample project @Rodrigo gave me... But, hopefully it will be the same in your case @sybilrondeau