pietM Posted March 14, 2021 Share Posted March 14, 2021 Hi everyone, Attempting to set the duration for a simple DrawSVG loop, but the duration isn't syncing correctly. Here's a vid of the problem: Untitled.mov Any help is much appreciated. Thanks for all, M See the Pen MWbLZzo by evryali (@evryali) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 14, 2021 Share Posted March 14, 2021 I don't see the line animating at all until after I click twice. In other words, just the "closing" one. You've got almost 200 lines of code in there - can you please provide only the absolutely essential code for a minimal demo that clearly reproduces the issue? That will significantly increase your chances of getting a good answer promptly. 1 Link to comment Share on other sites More sharing options...
pietM Posted March 14, 2021 Author Share Posted March 14, 2021 Thanks Jack! Here's a reduced pen, with just the GSAP animation. I thought the timer would helpful to measure the sync between the tween duration and the audio's duration. See the Pen rNWRMXp by evryali (@evryali) on CodePen Thanks again, M Link to comment Share on other sites More sharing options...
PointC Posted March 14, 2021 Share Posted March 14, 2021 What exactly should be in sync? Is the drawSVG animation supposed to follow the rotating dot? Maybe I'm missing something, but I'm just trying to understand what should be happening. 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted March 14, 2021 Share Posted March 14, 2021 17 minutes ago, PointC said: What exactly should be in sync? Hello, I am not sure either. But if you increase your Tween rotation to 720 and remove the delay from Tween2 you will be in sync so to speak. var Tween = gsap.to(player, { rotation:720, ... } var Tween2 = gsap.to("#target1", { ... repeatDelay:0 }) Link to comment Share on other sites More sharing options...
pietM Posted March 14, 2021 Author Share Posted March 14, 2021 Thanks for the responses! Sorry for not being more clear. I want the SVG animation to sync with the duration of the track (pulling from an <audio> tag), but when I use the track duration: var wholelength = track.duration; for the tween duration: var Tween2 = gsap.to("#target1", { paused: true, repeat:-1, duration:wholelength, ease:"none", drawSVG: "0% 100%", repeatDelay:.25 }) It doesn't work. Basically, I want the the duration for the tween and .mp3 length to match. Here's a more reduced pen: See the Pen rNWRMXp by evryali (@evryali) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted March 14, 2021 Share Posted March 14, 2021 Looks to me that it syncs just fine. (4.008) Are you trying to rotate the stroke once for each beep in the audio file? The audio file does have two beeps. Sometimes I'm getting NaN for the audio duration. I think you need to make sure everything is loaded before getting that duration and feeding it into the tween. You'd also need to remove the tween delay to stay in sync. 2 Link to comment Share on other sites More sharing options...
pietM Posted March 14, 2021 Author Share Posted March 14, 2021 Thank you, @PointC! I repeated the beep to extend the track duration. Not trying to sync that Not sure why I was struggling so much with this. But your feedback helped to solve my issue. I will be sure to load the audio before initiating animations for my projects. Thanks again for the help! Here's the working pen: See the Pen rNWRMXp by evryali (@evryali) on CodePen M 1 Link to comment Share on other sites More sharing options...
PointC Posted March 14, 2021 Share Posted March 14, 2021 ahh... that makes sense. I thought if you were trying to sync the beeps that just wasn't gonna work. Glad you got it working. Yeah - I think the audio duration returning NaN was the problem child. Happy tweening. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now