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


Everything posted by Dipscom

  1. A long time ago I wrote this Gulp task: https://github.com/dipscom/zipping-task/blob/master/gulpfile.js Don't really remember the ins and outs of it but I do remember it worked back then.
  2. Glad to be of assistance. May you go forth and animate!
  3. Hey Shutt90, Is there a reason why you aren't using a timeline in this case? That's exactly what timelines are for, to queue tweens and control them easily. You can do so much with a simple timeline, you'd be amazed at the simplicity of it. See here an example of the many ways you could organise your code using a timeline based on the code you provided: const getProjects = document.querySelectorAll('.projects_container-outer'); function tweenIn (target) { const overlay = target.querySelector('.projects_container-overlay'); const text = target.querySelector('.text'); const tl = gsap.timeline({ paused: true }); tl.to(overlay, { width: '100%', opacity: 100, duration: 0.3, backgroundColor: 'rgba(94, 59, 83, 0.8)' }); tl.from(text, { opacity: 0, x: 150, duration: 0.3 }); return tl; } getProjects.forEach(project => { const animation = tweenIn(project); project.addEventListener('mouseenter', function(e) { animation.play(); }); project.addEventListener('mouseleave', function(e) { animation.reverse(); }); });
  4. Hi gl.tiengogmail, There are a few errors in your setup. You have a redundant `App.vue` on the root of your project that's causing codesandbox to throw errors. You haven't imported ScrollTrigger or registered it as a plugin. You say you have little experience. Have you read the documentation on how to install GSAP and its plugins via NPM? Have you read the scrollTrigger documentation as well? From what I can see from your setup, you are trying to implement it straight into a complex page. How about you have a go at creating a minimal example. Just a single box that moves when you scroll the page? Or recreate one of the more basic examples from the docs? That way, you will understand how the different pieces work together and will be able to spot the mistakes you make when you are working on bigger things.
  5. Hello adamsmith104064, Here's a simple example: https://codepen.io/GreenSock/pen/QgBpve/78ee40fe229c8a75df25848128db6ca5 And here's the relevant discussion in the forums: A lot of simple examples have been created over the years and are somewhere in the forum. All it needs is a bit of searching.
  6. 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.
  7. 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!
  8. 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?
  9. 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.
  10. 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.
  11. 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>
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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?
  19. 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
  20. Hello, just to butt in with more question... Can I check which version of Node the two of you are using? I had issues the other day with dependency modules with a similar error: SyntaxError: Cannot use import statement outside a module That was caused because, if I remember rightly, anything below Node 14 cannot parse some modern thing or other that these dependencies have. I have Node > 15 and do not have the errors you are reporting. However, updating Node will NOT solve this issue as Jest is still complaining about Element and/or SvgElement not being of the correct type. This, I think might be an issue how it sees the GSAP object. I'll have a look and probably have @GreenSock himself have a look as it's probably going to take some brain power beyond mine to untangle this.
  21. Erm... This is looking quite a soup... It is still quite hard to conceptualise what is going on, from what I can see on these screenshots, you're inside a Wordpress installation, running a Gulp task, processing TypeScript. What is your Gulp task trying to do? I have very little experience with Wordpress, it's been a while since I used Gulp and Typescript is notorious for being pedantic. Do you think you can setup a smaller project where you mimic what you are trying to achieve without it being dozens of packages and a full wordpress installation? A tiny, simplified version of your Gulp task? Because I have a feeling your issue is not with GSAP, it's more like how all of those tools are working together.
  22. It's because it's written using Smarter Animation Code™️
  23. I made one too. 😅 https://codepen.io/dipscom/pen/NWdENmr
  24. Hi Adeliosparis, Welcome to the forums. Are you able to give more context? It will be very hard to assist you without any context. What is your setup? How are you importing the bonus plugins? How are you referring to them? Can we see an example or the code you are using? Have you checked the docs page with the information about the bonus plugin and installation? https://greensock.com/docs/v3/Installation