Wizard of Oz Posted August 23, 2021 Share Posted August 23, 2021 Hi, I read a story by PointC which told of his journey into GSAP & Javascript, in that post he gave advices to newbies (like me) to start small and challenged us to share what we create. I believe the exact words were "come out of the shadows" So in the spirit of obedience, I am sharing this very very basic tini tiny pen which I used to practise my understanding of the GSAP Utils method. I must admit it feels a bit stupid sharing such a basic thing but please delete this if the forum is not meant for such But to you reading right now with a much firmer understanding of the GSAP Utils method. Is this the correct way of doing it as noted here? Thank you for all the advices in advance. See the Pen dyRbxLp by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen 2 Link to comment Share on other sites More sharing options...
OSUblake Posted August 23, 2021 Share Posted August 23, 2021 Hi @Wizard of Oz Thanks for sharing! It's good to start small. I wish more people took that advice. And your loop is good. The point of a loop is to keep your code DRY (Don't Repeat Yourself). Without the loop, your code would be much longer. Have you checked out this video? And related demo... See the Pen RwbLVpW by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted August 24, 2021 Author Share Posted August 24, 2021 Hi @OSUblake Wow! I was not aware of all the other cool utility methods. Thanks so much for the links. I am already getting my hands dirty with these. FUN I can't wait to explore more. 3 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted August 26, 2021 Author Share Posted August 26, 2021 (edited) Hi @OSUblake Any advice on how I can make this pen DRY? I am aware that it's very verbose as it is. I tried using the utility.Array method but I was unable to target only the content that's supposed to open when you click on "read full bio." I checked other forum questions pertaining expand/collapse, accordion etc. But most are in jQuery and I am struggling to understand the logic. Anyway, thanks in advance for any tips, tricks & recommendations Edit: For some reason you have to click on the "read full bio" button twice before it starts working. See the Pen ExXxLmr by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen Edited August 26, 2021 by Wizard of Oz Edit: For some reason you have to click on the "read full bio" button twice before it starts working. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 26, 2021 Solution Share Posted August 26, 2021 7 hours ago, Wizard of Oz said: Edit: For some reason you have to click on the "read full bio" button twice before it starts working. Your timeline is paused and not reversed, so it's calling reverse on the first click. Next time you click, it will be reversed, so it will call play. A good way to handle that is not pause your animation, and add .reverse() to the end, which will put the animation in a state ready to play on the first click. 7 hours ago, Wizard of Oz said: Any advice on how I can make this pen DRY? You can select children elements, kind of like jQuery find, using querySelector and querySelectorAll. If you need to select multiple children, you can use GSAP's selector utility. See the Pen wveaaOx by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted August 26, 2021 Author Share Posted August 26, 2021 Thank you so much @OSUblake GSAP = 🔥🔥 I just read about the utility selector and it solves this exact problem as you mentioned. Can't wait to use it to break more things so I can come here we repair them together :))) You guys rock! ❤️ Have a great day ahead! 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted September 23, 2021 Author Share Posted September 23, 2021 @OSUblake See the Pen vYZabyE by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen Thanks for sharing the utility intro video again. As promised I put it into some use and I am here to trouble you with some more questions :)) Is there a better way of doing the below? Currently I am just "ifing" all conditions everything and I assume that's not the best practise? Is it possible to listen to each snap and load the images and time from an object? Is that even doable? TIA Link to comment Share on other sites More sharing options...
OSUblake Posted September 23, 2021 Share Posted September 23, 2021 43 minutes ago, Wizard of Oz said: Is there a better way of doing the below? Currently I am just "ifing" all conditions everything and I assume that's not the best practise? I think you had the right idea with your timeLapse object. You can get the object using bracket notation. let item = timeLapse[value]; See the Pen QWgBeoG by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted September 23, 2021 Author Share Posted September 23, 2021 Brilliant! Much cleaner code and it makes more sense this way. Thank you so much for the lesson @OSUblake :))) 1 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