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. Dearest @mikel, The beauty of harmonious relationship between shapes, colour, light and shadows transcends flesh.
  2. Hello, hello, Sorry been busy. Well, young grasshopper, where there's a will, there's a way. https://codepen.io/dipscom/pen/c88432c068fae486934051056c8dae4b
  3. *Magic* And don't thank me, I did nothing. Thank yourself for doing it.
  4. A tip, you might want to remove as much of the CSS transitions that affect elements that you are animating with GSAP, use one or the other. Not CSS transitions and GSAP on the same element, it always end up causing issues because GSAP makes its calculations and store them but then, the CSS transforms mess with it all.
  5. Typical, isn't it? Anyways, that's how I usually debug when I get stuck on something. Get rid of everything, add one little bit at a time until it breaks again. Do come back and let us know what was wrong, it's always useful to someone else who might be struggling with something along those lines. And, well done on taking the steps.
  6. It looks like you're using a linter that's compaining about how gsap was set up. When I made my test here, I didn't add a linter. Are you using one? Which? It might be that you will need to customize the linter you're using to allow GSAP to do its thing.
  7. The '+02' is causing that label to be a completely different label so, whatever is happening there is not really what you think it is. I can't read and digest all of your code right now. I've got to get on with some work now. But I will try and see if I spot something myself. It might be that you might need different labels depending on which case you are trying to play. Have you tried calculating the length of those nested timelines to see how long they take and if they are pushing their siblings around?
  8. I've had a quick look and can't think of much from the top of my head. When I ask for a bundle, if you get your project, make a copy, delete everything except that icon 3 and the rollover logic. Then, we can really just focus on the issue. Right now, it's quite hard to see what is going on if I can't change the code to see what it does. There's also the fact you are using an SVG (which is not a bad thing) and SVGs have plenty of gotchas to be aware of. What happens if you try to rotate the <g> element instead of the path itself?
  9. Hey, 1 - Yes. Yes. 2 - Yes. Yes. 3 - I used the version from bonus-files-for-npm-users/ - the umd one is a different spec. Don't ask me to explain, I don't know enough. All I know is that is the 'other' spec that is losing preference over time but still exists around. Let us know if you have more questions.
  10. Question(s): Have you noticed that your label is written as '#atk+0.2' when it should have been 'atk+=0.2'? Why the '#' at the start of it? It really isn't necessary and will probably confuse you/other people in the future. Also, have you noticed that you have used backticks in one of your labels? Consistency is key to less stress... Finally, does the master timline has to be an infinite timeline (repeat:-1)? Side comment: The guy who wrote the above article is the Same Guy who confused you with the video. Just Sayin'...
  11. On an ideal world, if you could provide a little bundle that we can run, tinker and test to try and figure out what might be wrong. Because, just reading code like that, one needs to be super experienced to know what might be wrong. Unfortunately, I am not at that level. It makes it easier being able to run the code ourselves and see it break. Don't worry about sending your production setup. A single html with the minimal build tooling you have and a single line of GSAP showing the error is enough.
  12. Hey @Carl, you're The Guy so, maybe you've got a link? But, what is your question jonForum? I don't see anything wrong in the video. He's just bringing up a point that people need to be aware of. If you want to stich two relatively positioned tweens together, you can use a label. tl.to(el1, 2, {}) tl.add('MyLabel', '-=1') tl.to(el2, 0.5, {}, 'MyLabel') tl.to(el3, 0.5, {}, 'MyLabel+=0.1') // this tween will start 0.1 seconds after the one above because 'MyLabel'
  13. Hi Longstoryshort, Welcome to the forums! Yes, you should be able to achive that by using a function in your stagger with the BRAND-SPANKING-NEW Advanced Staggers™️ see this post with details and here is a page of the docs with relevant details as well. Something along the lines of the bellow should do the trick: .staggerTo(element, 1, {autoAlpha:1}, function(index, target, list) { return 0.1 * index; }
  14. Hi nicoladelazzari, It looks like you have not placed the correct version of the plugin in the your vendors folder. Can you check that you have used the ThrowPropsPlugin that is inside the folder: 'bonus-files-for-npm-users'? I have just created a dummy project here in my desktop, added Draggable and ThrowPropsPlugin as a test and it is working as expected. The catch to pay attention to with ThrowPropsPlugin is that you should only require it in the browser side of the build and not import it as if it's a npm package. import TweenMax from 'gsap/TweenMax' import Draggable from 'gsap/Draggable' if (process.client) { require('~/assets/vendor/ThrowPropsPlugin') }
  15. Hi Violetta, Welcome to the forums! It's quite hard to debug in the dark like this. Do you think you could setup a minimal-code example for us to look at? I have worked in projects in the past where gulp-uglify was used without having this issue. Maybe you have some setting turned on that might be mangling the code too much?
  16. Because it is not hardware accelerated and it is not calculated in the composite stage of the browser so the browser has to do more calculations than necessary. You want to only animate transforms and opacity if you can help it. I don't see how transfoming an element would cause the background of the element to be modified. Have you got a simple example where that's happening?
  17. Well, it looks like that while I was asleep, others have chimmed in with useful information. To recap: - It appears you installed the gsap package incorrectly, as Blake pointed out. There's no need to add it globally, it needs to be added as a 'dependency', make sure you're not adding it as a 'devDependency', that'll make a difference. - On your codepen example, as Jack pointed, you're targeting the wrong element. - You might want to have a read on using npm to make sure you understand how to install and use packages correctly. Then, you will probably want to read the primer of animating with GSAP in React as linked above. Finally, I think we have come to the conclusion to your thread's title: Contradictory Information. That being: it's not that the information is contradictory, it is relevant to the context it was given. One can use the CDN as a source for GSAP, or download a copy of the script and have it in a local folder, or packaged as a dependency using NPM. Each has its own advantages and its own steps that one must take in order for them to work. Does this help you?
  18. And here is a version using the overflow and a couple of nested elements. https://codepen.io/dipscom/pen/EJXERq
  19. Erm... Not really. Can you formulate a question? As is: "I am trying to bundle GSAP with create-react-app but I seem to be doing something wrong here as it fails to build. Here is a link to a reduced-case example".
  20. DING! DING! DING! Ladies and Gentlemen! We have a winner! Well done mr. @Rodrigo, you have seen what both of us has missed. A real team effort. Allow me to take in some credit where none is deserved.
  21. Hey Scatterbrainz! You know the answer is the classic: 'It depends...", right? Sorry about it being confused and information being contradictory. There are some reasons. One is that there is no official line. The original way of including GSAP was via a CDN and, a CDN is actually a very good starting point if you have a library that is very common and widely used because it gets cached in people's browsers and you no longer need to download it. But then, bundling systems have appeared. People started showing up here trying to import GSAP into their projects. It got so common having to explain how to bundle it up with a build system that the guidance in the docs on 'how to use with npm' was created. Back to 'it depends'. It depends on what you want to achieve. If all you are after is writing posts and tutorials on how to create animations using GSAP, try to have as little steps as possible until the student gets to the animation phase. In my personal view, that would be to use the CDN and a link on the Scripts tag. Less stuff to faff around with. One link and you're ready to roll. No config files, no package.json, not tree-shaking issues. But, if you are trying to teach people how to use GSAP in a bundle system (for whatever reason people think it should be done), then, you will need to understand the advantages of that pattern, how the bundle system work, how it is mangling GSAP (or not) and then, come up with the solutions to make it work. OSUBlake is very knowledgeable, I will defer to his opinion in the vast majority of times as he really know his stuff. But he is not perfect and others have different viewpoints. Finnaly, it all this that I wrote has nothing to do with your question, then, help me out as I seem to have not understood what you were asking.
  22. Hey Gregor, Just to chime in, as I have opened all your links and scrolled around a bit but did not see any slowdown here either. I'm on a Macbook, though, not on an iMac. Maybe it's something to do with the machine itself?
  23. I'm not sure what is causing your added delay. In your example you are using absolute time positioning so, it shouldn't be adding more versions of that same animation further down the timeline. Having said that, if you are using this in a SPA, there is no need to be recreating the animation every time the user click on the button. As cheap as it is to create the animation, you will be better off just toggling the play and reverse methods of an already created timeline. Is this example of yours an exact copy of what is going on in your NextJS project? There might be something else at play here that is not captured in the CodePen.
  24. It's because GSAP does not officially support clip-path. It's not widely supported in the browsers (see the compability table at the bottom of the MDN article) and it would require a significant amount of logic to implement correctly, which would not be a good use of resources given the not-so-great browser implementation. You'll probablly be better off, putting the image you want to mask inside an SVG and clipping that or, since your masking is circular, creating a DIV, setting its border radius to 50% its overflow to hidden and animating that.