FrEZ

Hello, I tried wrapping p, so that when I click on the buttons it seeks a near value, rather than spinning going to it, but it spins all the spins made until it finds it. How do I make it spin till it finds it without spinning a thousand times(try after grabbing and throwing). Also can't figure out how to make the carousel snap to the nearest element. I would be grateful for that help as well. Take care!

The codepen is self expanatory.

That's sort of it, but as I stated above, it needs to be in separate functions, as the display, animation and positioning is different for each state.

Check out how the text appears on this page Pixelynx. When you scroll, the old containers reverse and the new ones appear with different animations.

Hi! I am trying to make a container appear with a certain animation and when the user scrolls, this animation reverses and the next animation comes in. Also if the nav menu is clicked, the current display reverses and the corresponding container appears. The thing is I am trying to make a couple of containers appear/disappear with certain animations, thus I am trying to use functions. If there is a more optimal way, please let me know, just bear in mind that for the first function there could be 3 containers, for the second 1, for the third 4, thus making it more complex. Hope you can help! All the best!

Can't I use the snap method somehow?

GSAP Starter Template (codepen.io)

Hello, I am trying to make the carousel snap to the closest position after drag and spin to the corresponding position by pressing the li elements, but can't seem to figure out how to do it. Could I get some help? Thanks in advance!

Hello, I am trying to make a consecutive animation on scroll that reverses the previous one and then executes the new one. Is this an optimal way, as I am trying to have different animations for each container? If not, can someone please show me a better one? Thanks a lot! let tlForText = gsap.timeline(); let indexForText = 0; const textAnimations = { 1: function() { indexForText = 1; tlForText .to('first-container', { x: -100, }) } }, 2: function() { indexForText = 2; tlForText .to('second-container', { x: 100, }) }, 3: function() { indexForText = 3; tlForText .to('third-container', { y: -100, }) }, 4: function(){ indexForText = 4; tlForText .to('forth-container', { x: -100, }) } 5: function(){ indexForText = 5; tlForText .to('first-container', { x: 100, }) }, } const funcForText = (index) => { index= indexForText; if(index==! 0){ tlForText.reverse(); } textAnimations[index] }; ScrollTrigger.observe({ targer: window, type: 'wheel, touch', onUp: () => funcForText( indexForText - 1 ), onDown: () => funcForText( indexForText + 1 ), })

The idea is to keep everything running, just have the cards facing one way.

Edit it so all the cards are facing towards the camera, not turning

It does. Is there a way to edit it?

I can't seem to figure out why the cards are turning while spinning? How can I make them face me while spinning?

When the scroll/grab is done, how do I make it move back to a centered position of the closest element?

How do I make both animations run at the same time? Is there a way to do it with timeline, or does timeline do the first one, then move on to the next? let tl = gsap.timeline(); tl.to(camera.position, { duration: 2, ease: "power3.easeInOut", ...cameraPositions[index], }) .to(camera.rotation, { duration: 1.5, ease: "power3.easeInOut", ...cameraRotations[index], } )

When the final camera position is reached, it loops back to the start, rather call another function with different gsap properties. How can I make it call another function and not loop back? let wrap = gsap.utils.wrap(1, 6); gsap.registerPlugin(Observer, CSSRulePlugin); let animating = false; function scroll(index) { index = wrap(index); currentIndex = index; animating = true; let tl = gsap.timeline({ onComplete: () => animating = false}); tl.to(camera.position, { duration: 2, ease: "power3.easeInOut", ...cameraPositions[index], }) Observer.create({ target: window, type: "wheel, scroll", onUp: () => !animating && scroll(currentIndex - 1), onDown: () => !animating && scroll(currentIndex + 1), preventDefault: true });

That helped, thanks! But I still can't figure out how to make my onUp and onDown go through several functions, not just one(meaning, change camera positions more than once). I saw a codepen using indexes, but it was in react and was very hard to understand.

Currently my observer is animating only once forwards/backwards and doesn't animate again. Also I want it to animate 3 times in a row and can't figure out how. I know that my function limits it to only once. Would appreciate if someone could help! function previous() { animating = true; gsap.to(camera.position, { ...cameraPositionsX['first'], duration: 1, }) } function next() { animating = true; gsap.to(camera.position, { ...cameraPositionsX['second'], }) } Observer.create({ target: window, type: "wheel, scroll", // touch? onUp: () => !animating && previous(), onDown: () => !animating && next(), onComplete: () => animating = false });

Thanks! That helped. Only thing I changed was that I moved camera.position instead of the whole canvas. I am trying to replicate this mouse movement and think that's a step closer! https://pixelynx.io/musicverse/

I am currently working with Three and just started using GSAP and am trying to create a smooth hover over the body with a slow down of the movement when the mouse stops Moving. This is my code, can I get an inside on how to replicate it via GSAP? Thanks! const bg = document.querySelector('#body'); const canvas = document.querySelector('#ThreeJSCanvas'); const windowWidth = window.innerWidth / 1.5; const windowHeight = window.innerHeight / 1.5; bg.addEventListener('mousemove', (e) => { const mouseX = e.clientX / windowWidth; const mouseY = e.clientY / windowHeight; canvas.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`; });