Kayoshi Posted June 22, 2020 Share Posted June 22, 2020 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 : 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. I did a little drawing on Paint to help you understanding what I want to achieve! Thanks a lot for your help, Kind regards See the Pen OJMpdvZ by Kayoshi (@Kayoshi) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted June 22, 2020 Share Posted June 22, 2020 Hi @Kayoshi You'll need to duplicate the box, and likely will want to use the modifier plugin to set the position. This page in the docs should help, as there are some examples similar to what you're looking to achieve: https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin 3 Link to comment Share on other sites More sharing options...
Kayoshi Posted June 22, 2020 Author Share Posted June 22, 2020 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. Will have to look at some tutorials to get better! Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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 4 Link to comment Share on other sites More sharing options...
Kayoshi Posted June 22, 2020 Author Share Posted June 22, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 FYI I just updated the pen with some comments if that helps Happy tweening. 3 1 Link to comment Share on other sites More sharing options...
mikel Posted June 23, 2020 Share Posted June 23, 2020 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 3 Link to comment Share on other sites More sharing options...
Kayoshi Posted June 23, 2020 Author Share Posted June 23, 2020 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! 🙏 1 Link to comment Share on other sites More sharing options...
gwsolar Posted June 23, 2020 Share Posted June 23, 2020 Never done that before, but it deserves to remember. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now