Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pietM

DrawSVG Looping Duration

Recommended Posts

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: 

 

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

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. :)

  • Like 1
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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

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

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

ahh... that makes sense. I thought if you were trying to sync the beeps that just wasn't gonna work. :D

 

Glad you got it working. Yeah - I think the audio duration returning NaN was the problem child.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×