Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Wizard of Oz

GSAP Utils

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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 :D

I can't wait to explore more.

  • Like 3
Link to comment
Share on other sites

Posted (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 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

  • Solution
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

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!

 

image.thumb.png.64fdcf63d8cc83e56b0435965dadf943.png

  • Haha 1
Link to comment
Share on other sites

  • 4 weeks later...

@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

 

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

 

 

  • Like 1
Link to comment
Share on other sites

Brilliant! Much cleaner code and it makes more sense this way. Thank you so much for the lesson @OSUblake :)))

  • Like 1
Link to comment
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.
×