Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 12/23/2017 in all areas

  1. To the members of the CommaClub, I pay you great respect and I am always fascinated by the commitment and the outstanding solutions ... Congratulations @Dipscom. May more follow ... Kind regards Mikel
    4 points
  2. Here is the demo, you can add more conditions to determine what is closest number while dragging using onDrag, onThrowUpdate callback. Also, how do you create your demos? I think I pointed out to you previously as well that you were using really old version of everything. Your current demo was using 1.17.0 which I guess is older than 2 years. Always make sure you are using latest files, easiest way is to google 'GSAP cdn' which will show you links from cdnjs to all non-club files. To get links to club files visit this pen https://codepen.io/GreenSock/pen/OPqpRJ Which still points older files by version or two but still better than using year old files.
    1 point
  3. Hi @kaliel I was in the middle of making a demo for you, when I noticed a problem, so hopefully you can help me out. I modified the SVG from your demo so everything is positioned in the top-left corner, and that works great. But I need another SVG. The problem is that most of the logos are so close together, that the frames are overlapping, so the edges of others logos are visible in a lot of the sprites. You can see what I have so for. It's more noticeable on the larger logos. And I still have a little work to do, like making it responsive, but the performance gains should be pretty obvious. So I need 2 svgs. The current one, with everything in the final 2018 position, and one where the bounding boxes of the different logos won't overlap with each other. How that is setup really doesn't matter. I just need to be able to cross reference the positions for each element on the different SVGs. Ideally, the data from that could just be converted into something like a json file so you don't have to parse the SVG at runtime. cc @alaric I'm still going to get to your SVG doing something very similar to this using, so I'm thinking I will need the same thing from you.
    1 point
  4. I doubt that it can be done without calculations. Maybe you can use element as background so you won't have to deal with parent child calculations.
    1 point
  5. The position of child element is determined by parent so you can't find any built in solution for something like this in CSS or in most javascript libraries. You will just have to tween child element with same negative value at the same time.
    1 point
  6. That's because when a tween is defined it is rendered immediately to the start position, usually only noticed in the case of 'from tweens'. Because you are using set at the start of timeline, it is behaving same. You can set immediateRender to false on first tween and it will behave as expected. Well and you can use just fromTo tween to same thing. // To tween tl.set(".slide", { opacity: 1, immediateRender: false }); tl.to(".slide", 1, { x: 300, opacity: 0 }); // fromTo tween tl.fromTo(".slide", 1, { opacity: 1, immediateRender: false }, { x: 300, opacity: 0 });
    1 point
  7. yPercent is the easiest, but the slowest because it has to calculate more stuff because it's based on the size of the element. And the reason for the translate and matrix transform is so that you can animate yPercent and y separately. TweenLite.to(box, 1, { yPercent: -50, // translate value y: 100 // matrix value }) GSAP has some performance stuff built in. Inspect your middle box (box2). GSAP switches from 3d to 2d at the end. However, if you set force3D to true, it will only use 3d. But really, your best bet is to just test and see what works best for what you're doing. Performance will vary a lot depending on what you're animating, and the browser. Setting will-change: transform in your CSS might provide the best performance for Chrome, but if you try that in Firefox and the element is too big, you might get a warning in your console saying that the surface area is too big, and will-change has been canceled. It's definitely frustrating figuring out what works best for everything.
    1 point
×
×
  • Create New...