[divide screen size on 100 circle with different radius]

Hello I want to know if I can divide the screen size on 100 circle with different size please like this website bubbles also I try to use @nivo/circle-packing to get the radius after packing them but I cannot so how to get it please 

[circles don't overlapping and animate]

23 hours ago, Toso said:

 

with threejs you are making it 10x harder for yourself since you will also need a physics engine with threejs like Rapier or cannon, creating it with a framework like react for example. you will need to study also extra stuff like react three fiber, react three drei, react three rapier / cannon 

 

i think Rodrigo gave you the best option here to use a physics engine directly something like this one i created with Matter it was much simpler to do it compared to trying to add physics with threejs 

 

https://balls-orcin.vercel.app/

you can grab them and test the zero gravity btn 

thank you so much but the problem is in matter.js can I detect the size of them to occupy the whole screen ?

[circles don't overlapping and animate]

20 hours ago, Toso said:

hi @amjad_barchini could you please add a minimal demo so we can see what you built and what the issue you have?🙏

my demo is too bad so it is not offer any shape like the live website

 

[circles don't overlapping and animate]

19 hours ago, Rodrigo said:

Hi,

 

This not a simple task and is beyond what GSAP is built for. GSAP is an animation engine but not a collision detection + physics library. GSAP can provide some aspects of this with the Physics 2D plugin:

https://gsap.com/docs/v3/Plugins/Physics2DPlugin

 

Here is how collision detection works in is simplest state:

 

But if I was you I'd look into Matter JS for this:

https://brm.io/matter-js/

 

Happy Tweening!

thank you so much but after a lot of searching I think only the three.js can build like this bubbles or vanilla javascript but it is too hard

[circles don't overlapping and animate]

hello I want to make website to simulate this website exactly in the way of movement and behavior when the vircles touch each other is there any way to buil it using gsap please https://cryptobubbles.net/

[gsap dont work when resize the windo and the animation start working correctly only when reload the page and I'm using scrolltrigger and lenis]

<script setup>
import { ref, onMounted } from "vue";
import axios from "~/services/axios.js";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { CheckBadgeIcon } from "@heroicons/vue/24/solid";
//   import { CheckCircle } from '@vue-icons/heroicons';
import paint from "../../assets/images/paint.jpg";
import t1 from "../../assets/images/true/t1.jpg";
import t2 from "../../assets/images/true/t2.jpg";
import t3 from "../../assets/images/true/t3.jpg";
import t4 from "../../assets/images/true/t4.jpg";
import t5 from "../../assets/images/true/t5.jpg";
import t6 from "../../assets/images/true/t6.jpg";
gsap.registerPlugin(ScrollTrigger);

const data = [
  { image: t1, text: "amjad" },
  { image: t2, text: "amjad" },
  { image: t3, text: "amjad" },
  { image: t6, text: "amjad" },
  { image: t4, text: "amjad" },
  { image: t5, text: "amjad" },
];

const initAnimation = () => {
  const section_2 = document.getElementById("horizontal");
  let box_items = gsap.utils.toArray(".horizontal__item");

  gsap.fromTo(
    box_items,
    {
      xPercent: 30 * (box_items.length - 1),
    },
    {
      xPercent: -120 * (box_items.length - 1),
      ease: "sine.out",
      // duration: 5,

      scrollTrigger: {
        trigger: section_2,
        pin: true,
        scrub: 1,
        // markers: true,
        snap: 1 / (box_items.length - 1),
        end: "+=" + section_2.offsetWidth,
        toggleActions: "restart pause reverse reverse",
      },
    }
  );
};

let scrollTriggerInstance;

const features = ref([]);
const featuresFor = ref([]);
const error = ref(null);
const isLoading = ref(false);


onMounted(() => {
  // fetchChoicesData();

  window.addEventListener("resize", () => {
    ScrollTrigger.refresh();
  });

  const handleResize = () => {
    if (window.innerWidth <= 800 && scrollTriggerInstance) {
      // Kill the ScrollTrigger instance and animation if screen size is less than or equal to 800px
      ScrollTrigger.refresh();
      scrollTriggerInstance.kill();
      scrollTriggerInstance = null;
    } else if (window.innerWidth > 800 && !scrollTriggerInstance) {
      // Initialize the animation if screen size is more than 800px
      ScrollTrigger.refresh();
      scrollTriggerInstance = initAnimation();
    }
  };

  if (window.innerWidth > 800) {
    scrollTriggerInstance = initAnimation();
  }

  window.addEventListener("resize", handleResize);
});

ScrollTrigger.refresh();
</script>
  

<template>
  <div class="w-full">
    <h1 class="text-white text-[3rem] sm:text-[5.5rem] leading-[5rem] font-[600] mb-[2.2rem] ">Pracht <br> Abonnement</h1>
   
    <div
      id="horizontal"
      class="horizontal w-full big:h-[100vh] big:overflow-hidden big:px-0 px-[1.5rem] py-[1rem] gap-[4rem] grid grid-rows-my-features  big:pb-0 pb-[8rem] relative"
    >
      <div
        class="w-full   sm:px-[5rem] xl:px-[14rem] h-max grid justify-items-center gap-[1rem] sm:gap-[10rem] sm:grid-cols-2"
      >
        <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start">
          <div
            class="container-tick"
          >
            <CheckBadgeIcon class="icon__tick" />
            <h1 class="text__tick">Maandeliks Betalen</h1>
          </div>
          <div
            class="container-tick"
          >
            <CheckBadgeIcon class="icon__tick" />
            <h1 class="text__tick">100% Garantie</h1>
          </div>
          <div
            class="container-tick"
          >
            <CheckBadgeIcon class="icon__tick" />
            <h1 class="text__tick">Professioneel Schilderwerk</h1>
          </div>
        </div>
        <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start">
          <div
            class="container-tick"
          >
            <CheckBadgeIcon class="icon__tick" />
            <h1 class="text__tick">Zorgeloos onderhoud</h1>
          </div>
          <div
            class="container-tick"
          >
            <CheckBadgeIcon class="icon__tick" />
            <h1 class="text__tick">Reiging & Glasbewassing</h1>
          </div>
          <div
            class="container-tick"
          >
            <CheckBadgeIcon class="icon__tick" />
            <h1 class="text__tick">Ondafhankelike inspectie</h1>
          </div>
        </div>
      </div>
      <div class="container row-span-2 w-[100%] h-full m-auto">
        <div class="horizontal__content h-full big:grid-flow-col grid gap-y-[4rem]">
          <div
            v-for="num in data"
            :key="num"
            class="horizontal__item  big:h-[60%] big:w-[28rem] h-[20rem] sm:h-[30rem]  w-full mr-[10rem]"
            >
            
            <div class="horizontal__num w-full  h-full relative">
              <img :src="num.image" class="w-full  h-full object-cover" alt="" />
            
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  

<style scoped>
.text__tick {
  @apply text-white text-[1rem] sm:text-[1.4rem];
}

.icon__tick {
  @apply text-[#f598af] text-[1.8rem] w-[2.2rem] h-[2.2rem];
}

.container-tick {
  @apply grid grid-cols-my-calc grid-flow-col  items-center text-left justify-items-start gap-[.7rem];
}

</style>