Jump to content
Search Community

Background sliding animation problem

Kenken94 test
Moderator Tag

Recommended Posts

Hi !

Pretty new to GSAP so I'm sorry if the thing that I'm asking is pretty basic thing.
Currently experimenting on making a infinite sliding background, and the current problem that I encounter is :

1. each sliding background kinda starts sliding from the middle of the background. Is there anyway to make it starts from the left then sliding to the right.

2. I tried to loop the animation so it starts from the beginning again but, when the animation starts over the background became white then the animation cycle starts again. Is there anyway to make it loop naturally so each background will start animating on top of each other.

 

Those are my current issues that I encounter on my experiment.

The experiment idea came from this website that I saw a few weeks ago : https://soto.shinfuji.co.jp/

So, my current goal is not to recreate 100% the exact thing, but just the essential animation which is sliding from left to right then looping the animation.
And I tried by copy pasting the whole site and try deleting some elements that I don't need but it ended up breaking the whole thing.

 

Thanks in advance for any help you might provide.

See the Pen dyjEMvJ by Kenken94 (@Kenken94) on CodePen

Link to comment
Share on other sites

Hi @Kenken94 welcome to the forum! 

 

Don't worry about asking 'basic things' here. Looping animation can be really tricky, but luckily our @Carl dit an in depth tutorial about it which is a great watch and easy to follow. I do have to saw that this is a bit advanced topic if it is your first animation, but I think if you pay close attention and watch the demo he provided.

 

 

For the rest of your setup I would work with opacity: 0; instead of display: none; I'm not completely sure, but something tells me that images do not load if they are display: none; so when you set them to display: block; with GSAP the images first need to load which could result in weird effects. Also just something to keep in mind .fromTo() tweens are great, but personally I rarely use them, if your element is al ready at it end state (or begin state) a simple .from() or .to() is all you need. 

 

You could also look into clipPath, it's a different effect, but it is more performant then animating the width of something (I've used the following tool to create the clip-path's https://bennettfeely.com/clippy/. Sorry, maybe a bit of information overload, but I would suggest trying your hand at a new demo with this information and post back here if you have a new demo with a question. Hope it helps and happy tweening! 

 

See the Pen eYjagaL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

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