Rocha

No worries. Thanks a lot for helping out!

Thanks for pointing me in the right direction. I thought requestAnimationFrame() was very efficient but it may be only necessary when something needs to run constantly so cheers for that Before I leave the page I'm killing the events like this: document.removeEventListener('mousemove', mouseMove, false); cancelAnimationFrame(mouseMove); And load the events back in this way document.addEventListener('mousemove', mouseMove, false); Is that the most efficient way to handle things you reckon? Previously, I had xPos and yPos variables in another function but I've now moved them inside of mouseMove() function mouseMove(e) { xPos = e.clientX; yPos = e.clientY; cTween.invalidate(); dTween.invalidate(); cTween.vars.x = dTween.vars.x = xPos; cTween.vars.y = dTween.vars.y = yPos; cTween.restart(); dTween.restart(); } Does that look right to you or should I keep those variables outside the function? I implemented your suggestions and the mouse seems to flow nicely no matter how many pages you visit.

Hi there, I noticed that after going from one page to another the custom mouse starts to lag. At first it's hard to notice but as you load 4 or 5 pages the mouse doesn't flow as smoothly as on the first page load. Am I missing anything that is making the mouse lags? I'm using Barba JS on the site so I'm not sure if I have to kill and restart the mouse function every time I transition between pages? Here's the link to my project: https://codepen.io/rochudo/project/editor/ZgGnON Thanks

It really does help, you've cracked it!! thank you very much @GreenSock I was miles away from achieving your solution but I sort of knew that all actions had to be stored within the same loop. I just didn't know how to even approach it I now get what you've done there so hopefully I can apply that to future projects

That looks so much better now @GreenSock Thank you so much!! It makes sense not recreating the timeline on every click because then you run into the issues you've mentioned. I couldn't see it before but I get it now. I had to add another bit of functionality to my codepen which is a pause all button. Unfortunately, it doesn't react as expected. Using either setor to in the pause all button function "does work" but once you click on any of the play buttons the animation reverses back again. I get it, it's the same issue I was having before, the timeline is at 100% so it will always do that. I feel stuck because the timeline audioPlayPause can't be accessed from outside $(".btn_play_pause").each(function(i, button) {} which makes it impossible to simply do audioPlayPause.reverse(); What would it be the best approach to tackle this? https://codepen.io/rochudo/pen/vYLXZvK

Hi all, I am trying to animate SVG elements for the two states (play/pause) when you click on each button. So far the animation works from play to pause but the reverse animation doesn't happen, it just jumps straight to the play icon. Although, after pressing play I set a timeout function that reverses the animation from pause to play after 5 seconds. Surprisingly, the animation works here even though the parameters are identical to the ones that don't work on click. Does anyone have any idea why is this not working? Thank you

I can't believe how easy it is to implement. Thank you very much for that. It does exactly what I need with far less code

I commented out all references to gsap and replaced them for the old JS code I previously had so you can see what I'm trying to achieve. It's now working but I was hoping to accomplish the same effect by using the DrawSVG plugin. https://codepen.io/rochudo/pen/ExPVQvJ I will definitely keep in mind the scrollTrigger plugin for my next project

Hi there, I would like to use the DrawSVG Plugin to draw a line as you scroll down/up the page. I worked out the percentage of the page that gets scrolled. I need the animation to start once you get passed the first block so I added the calculations in the JS function on scroll I have also set the SVG line to 0 gsap.set(pathID, { drawSVG: 0 }); I pass the percentage scrolled value to the drawSVG parameter but it doesn't get triggered for some reason. Does anyone know what's missing? Thank you

I love how I thought I was very close haha Your example shows I definitely wasn't. Thanks a lot for helping out, I understand what you've done there so this a great base to start from as I'm going to be animating more things on this project. You're right about not mixing CSS transitions with GSAP, I will definitely take this into account Cheers

Hi Zach Thanks for your in-depth response. I followed your advice and I updated the old syntax. That article was really helpful. I opted for creating separate functions to then call them inside of the event listeners. Hopefully I'm moving in the right direction? I updated the Codepen link to reflect those changes: https://codepen.io/rochudo/pen/pogzYJE It's almost there I think. Even though I set the animation (mouseup) to be 0.1s long and with no ease it seems to be taking much longer than expect it to reach 0%. Therefore, when you press the mouse down again the svg is still animating down to 0%

Hi there, I'm trying to animate an SVG using DrawSVG on mouse down/up. On mouse down the animation seems to be working fine but when you release the mouse and try to press it down again the animation doesn't happen. Instead, these parameters go down to: stroke-dashoffset: 0; stroke-dasharray: none; Does anyone know why is this happening? Thank you