Yusuke2223

So what I'm trying to do is when my stagger is done and after making it yoyo..it will change the new index of staggering..but it is not working even though I follow the stagger function is right. let rands = Math.ceil(Math.random() * (9 - 0) + 0) gsap.to(document.querySelectorAll(".box"), { delay:1, duration: 2, scale: 0.1, ease: "power2.inOut", stagger: { // grid: [1,9], from: rands, each:0.2 }, repeat: -1, yoyo:true, repeatRefresh:true, onRepeat: () => { console.log(rands) rands = Math.ceil(Math.random() * (9 - 0) + 0) } }); As you can see I tried it console.log it out but it seems it changing value but the "from" is not changing the index. Did I misinform this logic? I already saw something like this but it is not working on me when I tried it.

So I can't show a codepen now but I'll give a an basic example of it. so let say I have a two items that I want to animate at the same time but they must have a different animations by using a keyframes..Let say for example gsap.to([elem1,elem2],{ keyframes:[{ #for elem1: {rotateX:100}, #for elem2 : {rotateY:100}, },{ #for elem1: {rotateZ:100}, #for elem2 : {rotateX:100}, }], duration:2, ease:"power2.out", }) some thing like this.. I wanted to both animate them but they must be separated with their own specific animation. If any helps or just a suggestion where it close might be this I would solve it. Thanks.

So I'm working in labelsArray and I couldn't understand properly how it works but what this what I expect. First I thought "tl.labels()" is somehow called as an array which basically make it right (but it is an object array) so I was thinking if I do that my animation timeline would be easier to animated each item...because what I want to happen is that. If I click the box of an specific box. It will play the animation...that directly in tl.labels() and things that wasn't click will reversed() but don't mind this I can make this reversed() work out for myself. It is just my understand in tl.labels() was wrong.. I already used to the tl.currentlabel(`label${i}`).play() as for specific array index of timeline...just check it in my codepen so you can see it. It supposed to play the specific item in the timeline but it plays all the item not the specific one. Can anyone tell how does this work? cause I feel working with tl.labels() would be faster than just calling it one by one.

Okay I update the code with some Math.sin Math.cos but still doesn't make it perfect.. Here is the new update of codes. var update = function (per, bias, secs) { // update aspect and fov camera.aspect = container.clientWidth/container.clientHeight ; camera.fov = 50 + 25 * bias; camera.updateProjectionMatrix(); // change position var radian = Math.PI * 2 * per; camera.position.set( Math.cos(radian) * 5, 5 * Math.sin(Math.PI * 4 * per), Math.sin(radian) * 5); camera.lookAt(0, 0, 0); }; var per = 0, bias = 0, now = new Date(), secs = 0, lt = now, frame = 0, frameMax = 300, fps = 30; function name(params) { now = new Date(); secs = (now - lt) / 1000; per = frame / frameMax; bias = 1 - Math.abs(0.5 - per) / 0.5; if(secs > 1 / fps){ update(per, bias, secs); renderer.render(scene, camera); frame += fps * secs; frame %= frameMax; lt = now; } } gsap.to(camera.position,{ scrollTrigger:{ trigger:".main", start:"top top", end:"3000px", pin:true, scrub:true, toggleActions:"restart pause resume pause", onUpdate:() => { name() } }, }) It doesn't look in the center and making it looks like an ellipse rather than just going up and down and closing in. I do some changes to in the camera.fov but still wasn't made it out clear.

So I'm working right now in ThreeJS but I want to figure out something. I've created a lot of boxes and with a camera. In my own understanding in ThreeJS somehow the animation there is somehow kinda different in gsap because I don't know how can I applied in gsap. I want my camera to move in an ellipse revolution in the boxes. It is somehow like this in normal ThreeJS . https://codepen.io/yowyow3322/pen/QWQeYvE but when I'm trying to apply this in gsap I don't know how could I figure it out cause there is no information here about the ellipse movement in Threejs so I'm wondering if its fine to ask for help here? I want to get the idea of ellipse revolution in my codepen. As you see in this part of my another codepen that show the demo of Ellipspe revolution of camera let curve = new THREE.EllipseCurve(0, 0, 10, 5); let line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(100)), new THREE.LineBasicMaterial({ color: "yellow" })); line.rotation.x = -Math.PI * 0.25; line.rotation.z = Math.PI * 0.125; line.position.x = 5; scene.add(line); let cam = new THREE.PerspectiveCamera(25, 1, 1.5, 25); let camHelper = new THREE.CameraHelper(cam); scene.add(camHelper); let clock = new THREE.Clock(); let v = new THREE.Vector3(); renderer.setAnimationLoop(() => { let t = (clock.getElapsedTime() * 0.05) % 1; // magic is in these lines ////////////////// cam.position.copy(curve.getPointAt(t, v)); cam.position.applyMatrix4(line.matrixWorld); cam.lookAt(obj.position); ///////////////////////////////////////////// renderer.clear(); renderer.setViewport(0, 0, innerWidth, innerHeight); renderer.render(scene, camera); renderer.setViewport(0, innerHeight - 256, 256, 256); renderer.render(scene, cam); }) This is somehow annoying for me because I wanna do it in scrollTrigger as it keeps rotating in an ellipse also. In my original code which are the boxes. I want them to rotate in ellipse but I don't know how I will do it with. You can see the code at this part when you scrolldowning.. the camera it will coming near to you and going upward since I put z:5,y:5, but I don't know how I will apply with Math.sin Math.cos cause it way more confusing. gsap.to(camera.position,{ scrollTrigger:{ trigger:".main", start:"top top", end:"3000px", pin:true, scrub:true, toggleActions:"restart pause resume pause", }, y:5, z:5, }) } Does anyone understand my question barely enough? Help haha.

Actually overwrite:auto is kinda easy than what akapowl but I think it necessarry to do that hahaaha..Thanks @akapowl @GreenSock

So I'm working on SVG's and when I'm clicking the button multiple times it kinda seems give me a bug in the animation and I don't wanna that happen. As you see when you click it like before 0.5secs the animation will stack up..but I wanna reset it and play again the animation not animation like this when I take..Can anyone take me lead how to do it or how can I do it then? The animation is must be like what first click look like...even I rapidly click the button( because if a user click it multiple times it might be weird for them.) thanks for any help.

oh yeah I forgot about stagger lol...thanks for reminding me.

I've also updated the code..and it somehow like this now but It is still far from what I wanted to be it. https://codepen.io/yowyow3322/pen/gOvJobZ..

@GreenSock ok it supposed something like this.. but more smoother the easing.. https://codepen.io/yowyow3322/pen/ExQzEdg

@GreenSock thanks for responding..not literally like wave images..As you see in the images it makes like a wavy effect with each boxes. Take this iamge as example it goes small to big then small to big and small to big as it keep going and then after the duration is done...Something like this. I added an image also so it can be see.

Hi, so I'm using gsap and I want to know how do I make this like a wavy structure of image effect? I'm almost close to it but it lacks of synchronization..I've tried to search wavy effects images in here but it says literally like wavy not like a per box. Anyway heres the codepen.