Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gabriel.ortiz

Seamless infinite loop of SVG elements vertically

Recommended Posts

I'm working on a project to infinite scroll a set of diagonal lines in an SVG. I had some massive help from @Sahil  (thank you :)) who added easing effect on mouse scroll. He also suggested that I incorporate an infinite seamless loop of these shapes using the `modifers` plugin. So i pulled what I could from  https://cdpn.io/QEdpLe

 

I'm basically have 2 issues:

  • There's a noticeable jump between the end of one loop and the beginning of the next (See attached video: https://drive.google.com/uc?id=1GfIHd98vs85SOCRdOa45OmzsvjCFanJG). It's not quite right
  • `repeat : -1` doesn't work. I think it has to do with the proxyTimeline. When i try infinite repeat, the diagonals fly through the viewBox and it does not look good.

 

Here's what I've figured out:

  • Based on the "ModifiersPlugin:Seamless Loop" demo, We need to force each child item to advance simultaneously toward the distance of it's parent container, in this case it would be the `viewBox`
  • To position the next item back at the beginning, we use the `modifiers` callback and modulus to fix the next diagonal to the bottom of the viewport, using the height value of the `viewBox`.
  • The "ModifiersPlugin:Seamless Loop" demo also using an overflow to hide each element moving the left position. Somehow I might need to move the transition diagonal to happen outside of the `viewBox` but i'm not sure how to do that

 

Does anyone have suggestions on how I can make the loop more seamless?

See the Pen PowKLVQ by gortiz022 (@gortiz022) on CodePen

Share this post


Link to post
Share on other sites

Hey Gabriel and welcome.


The biggest cause of the jump is because you're not really wanting the animation to go all the way to 100%. What I mean by that is your SVG isn't setup to loop perfectly - it's "too tall" due to how rectangles work. As such simply changing the svgHeight to accommodate that fixes most all of the jump:

// Not perfect, I used trial and error to get a value
var svgHeight = svgGroup.viewBox.baseVal.height * 0.9369;

However, you could probably simplify your setup a good bit, like this:

See the Pen KKwXdJb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Let me know if you have any questions. Happy tweening!

  • Like 1

Share this post


Link to post
Share on other sites

@ZachSaucier Thank you so much for your help! You are 100% correct, the issue is that the beginning of the SVG needs to overlap with the end in such a way that makes it seem seamless. It's really difficult to do, and what i found from the modifiers demo was that the re-positioning of the box happened outside the overflow of the parent container --- so that's why it has a seamless effect.

 

Can you suggest any way to achieve an infinite seamless effect? Thank you again for your help!

 

Share this post


Link to post
Share on other sites

I think the approach I have above is good. You can spend more time playing with the value or try to figure out a way to get the exact number using dimensions to further reduce the chance of a jump. 

  • Haha 1

Share this post


Link to post
Share on other sites

@ZachSaucier yea i see what you mean. I'll continue to mess around with it. Thank you for your help and the inspiration. They key as you suggested is adjusting the viewBox. Thanks!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×