I want to create an animations where a lot of elements across the page all start to move towards the center, where a small circle starts to scale and transform into a phone, taking all these elements in. Using Nuxt
Here is the sample code
// Animation for scaterd object
//The Animation works but it is triggered as soon as the component mounts
userContext = $gsap.context((self) => {
const user = self.selector('.user_01');
$gsap.fromTo(user,
// { x: -350, y: -350 },
{
x: 0,
y: -100,
scrollTrigger: {
trigger: user,
scrub: true,
},
});
// });
}, users.value);
//Animation for center element
mainContext = $gsap.context((self) => {
const boxes = self.selector('.box');
boxes.forEach((box) => {
$gsap.fromTo(box, {}, {
scale: 1,
scrollTrigger: {
trigger: box,
scrub: true,
},
});
});
}, main.value);