Jump to content
Search Community

Modifiers infinite wrap to full width of viewport

richardsonStudio test
Moderator Tag

Recommended Posts

Hi, 

 

I'm trying to use the modifiers plugin to create an infinite loop of two embedded svgs that should look like one long infinite wave.

 

But, there is a gap at the end of each animation. Not sure how to fix that.

 

I made the animation go a little faster so you don't have to wait so long to see it.

 

Any help would be super appreciated.

See the Pen MWoEEwp by jooel (@jooel) on CodePen

Link to comment
Share on other sites

@OSUblake A little update. I didn't end up going with the helper function (frankly it blew my mind, LOL) or the modifiers plugin.

 

I realized after drawing it out on paper that I was trying too hard.

 

All I really needed to do was to animate two versions of the same svg side-by-side starting at right: 0 to the same distance as the width of one svg. And then I just repeat that animation at that exact moment. 

 

That's basically what I was doing originally, but something about the modifiers plugin was throwing me off.

 

Hopefully, there aren't any known issues that this would cause.

 

And, I do have a slight performance issue that I think is being caused by the amount of colors being cycled through in the animation. Not sure how to tackle that yet.

 

See the Pen NWgwaER by jooel (@jooel) on CodePen

  • Like 2
Link to comment
Share on other sites

13 minutes ago, richardsonStudio said:

And, I do have a slight performance issue that I think is being caused by the amount of colors being cycled through in the animation.

 

Yeah, animating gradients can be slow, and even slower with SVGs. You might try using a filter to change the hue or color matrix. Color changing filters are usually pretty fast. If that doesn't work, you may have to redo it using canvas or WebGL.

  • 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...