Jump to content
Search Community

DrawSVG Looping Duration

pietM test
Moderator Tag

Recommended Posts

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

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

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.
×
×
  • Create New...