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. Hi Cahrlyta, You're adding the great blank space yourself with the following JS in your code: function setHeight() { height = container.clientHeight document.body.style.height = height + "px" // <- This bit here. } I don't know why you are adding it or what is the effect you are after but that's what is causing the big white space. A tip for the future, try to simplify your code all the way to the bare minimum possible when trying to work things out. In this sample of yours, you have far more code, HTML, CSS and JS needed to illustrate your issue. I bet if you stripped it down yourself, you would have worked out what was going on.
  2. I can vouch for Jack here, Cassie. I've checked with him about this very thing and approved the post.
  3. Hey Refinery! You are just overthinking it a bit. All you need is the following: gsap.from(".list__item", { opacity: 0, duration: 0.5, x: 50, stagger: 0.5 }); What you are doing in your code is creating an individual Tween for each of the list items, not a timeline that contains all the items. As each tween is independent and only contains one item, there is nothing to stagger and they all paly at the same time.
  4. Hey jiggy1965! That is happening because you're calling the extenal function instead of asigning it to the onUpdate handler. // This calls the function once and assign its return value to onUpdate: { onUpdate: myFunction() } // This assigns myFunction as the method to call whenever onUpdate runs: { onUpdate: myFunction } Now, on your case, if you want to pass some values to the function being called onUpdate, all you need to do is wrap your function into an empty function like: tl.to(value, {startvalue:targetvalue, duration:2, ease: Power1.easeOut, onUpdate: () => updateslider(value.startvalue) }); Happy tweening!
  5. 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.
  6. Glad to be of assistance. May you go forth and animate!
  7. 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(); }); });
  8. 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.
  9. 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.
  10. 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.
  11. Dipscom

    GSAP and Svelte

    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!
  12. 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?
  13. 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.
  14. 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.
  15. 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>
  16. 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.
  17. 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.
  18. 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.
  19. Dipscom

    GSAP and Svelte

    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.
  20. 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.
  21. 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.
  22. 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?
  23. 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
  24. 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.
×
×
  • Create New...