Jump to content
GreenSock

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

Make a div go to left side when hitting right side

Recommended Posts

Hi guys,

I'm a student and I'm working on my portfolio.

I saw a lot of great websites using GSAP so I decided to try it too!

 

I've been able to create some cool animation so far but I'm having a hard time on this one :

https://codepen.io/Kayoshi/pen/OJMpdvZ

 

Basically, what I want is when my Fourth column (and all the others ones) hits the right side, I would like to see them coming out from left side.

 

image.thumb.png.85bd12da1824a086193391295d8d9cf9.png

I did a little drawing on Paint to help you understanding what I want to achieve!

 

Thanks a lot for your help,

Kind regards

 

Share this post


Link to post
Share on other sites

Thanks a lot for your answer.

 

To do the first test on CodePen I took this pen as an exemple : 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

 

But I still can't get it working, it appears again only when all the row has hit the right side, and the fourth column is resetting the animation when hitting right side.

 

See the Pen OJMpdvZ by Kayoshi (@Kayoshi) on CodePen

 

Will have to look at some tutorials to get better!

Share this post


Link to post
Share on other sites

Hey @Kayoshi and welcome to the GreenSock forums.

 

As Ryan said you'll need to duplicate the elements. It's also recommended that you position your elements using GSAP only as that makes the effect simpler.

 

Here's how I'd set it up:

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

  • Like 4

Share this post


Link to post
Share on other sites

Hmmm okay!

Thank you so much for your code and your help! 

I will play a bit with your code to understand where my errors were coming from!

 

Thanks guys, you're awesome!

Share this post


Link to post
Share on other sites

FYI I just updated the pen with some comments if that helps :) 

 

Happy tweening.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Hey @Kayoshi,

 

If you prefer fixed box widths, this version could be interesting.

Add / duplicate boxes for large window widths.

 

See the Pen oNXoOBq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

Hi! First thanks a lot for your exemples guys, they will help me a lot to learn.

That's the first time I ask a question on a forum and honestly I'm really happy to see how it turned out.

 

Now it's my turn to work! Thanks again! 🙏

  • Like 1

Share this post


Link to post
Share on other sites

Never done that before, but it deserves to remember.

Share this post


Link to post
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.

×