Jump to content
GreenSock

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

Modifiers infinite wrap to full width of viewport

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 Great, thx. I will dig into this. I have not come across that doc before.

 

I figured the modifier plugin got me so close that there was just something simple I was missing.

 

I've been using GSAP for about 10 years and love it btw. Just recently became a Club Greensock member!

 

Anyway, thx again

  • Like 2
Link to comment
Share on other sites

Thanks for becoming a member!

 

The modifiers plugin is definitely the way to do that, but I didn't do a deep dive into your code. I just figured it would be easier to give you a battle tested solution.

  • Like 1
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

23 minutes ago, OSUblake said:

 If that doesn't work, you may have to redo it using canvas or WebGL.

Canvas... I want to go to there... one day. I actually started learning it just the other day.

 

Thx for the help! I will definitely try using svg filters. That's a great idea.

 

giphy.gif?cid=790b76113f71a5dfe9628bf068

 

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

×