Wizard of Oz

Thank you so much @mikel & @OSUblake It's as if I sat on santa's lap and he gave me this forum. What a gift! Can't wait to play more with GSAP.

Hi, I am trying to create a text based carousel with splitText transitions between the slides. Here are my questions: 1. How come I still get the console messages even after using "gsap.config({trialWarn: false})"? 2. How can I get the "number " in 1/3, 2/3 etc to also animate properly during slide transitions? 3. Is there something in this code that's screams amateur? e.g. redundant code. Any way I could have written this better? Thanks as always for your wonderful insight and support Design & interaction inspired by: https://www.loudsnt.com/

I see the issue now. Seems to be a safari browser issue. Maybe this thread might help. I actually tried the same animation without using SVG and it still has the same trouble on safari. https://codepen.io/martinkariuki7-the-looper/full/mdBKwKq

I get the below

Works well in my safari. I have version 15.1. Maybe you have an older safari that needs an update?

Hi friend Your netlify link seems to be broken. Also, since the codepen is working. I doubt its a scrollTrigger issue. Maybe debug other elements on your app?

Ahhhh! Of course it's the object! Thanks so much @akapowl I hope you have a great day ahead!

Hi I am trying to implement a split text animation with scroll trigger and smooth scrolling. For some reason the letters are frozen so the animation does not happen. Would anyone have an idea on why this is happening or how to fix it? TIA Martin

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

@OSUblake https://codepen.io/martinkariuki7-the-looper/full/vYZabyE 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

Awesome! thanks

Hi, I noticed a weird thing. When I use the letter "Å" which is a Norwegian character, it get's chopped off a bit. Is there a way to avoid this happening? https://codepen.io/martinkariuki7-the-looper/pen/JjJddVR

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!

Thank you so much for the quick answer @akapowl You are a superhero indeed Although I have to say It's not really "my code." I just took what Zach wrote earlier and tried using that in a loop. So all credit should go to you superheroes. Have a good day ahead.

Hi, I am trying to recreate this using the the toArray utility method. Any idea why mine does not work? Thanks in advance for the feedback https://codepen.io/martinkariuki7-the-looper/pen/JjJddVR

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. https://codepen.io/martinkariuki7-the-looper/pen/ExXxLmr

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.

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.

Hi Rodrigo, Thank you, yes, it seems like the pen by Point C is much closer to what I am looking for

Hi, this is my very first post and I am very happy to be here I am learning from this codepen and had 2 questions 1. Is there a way to make the scrollbar work normally? On the pen I am learning from, it looks like scrolling down the site with the scrollbar, either by pressing and holding or clicking it results in some unusual activity. I saw the Tesla site also uses snap to sections technique but its possible on their site to use the browser scrollbar as normal. Here is the link to the tesla site: https://www.tesla.com/no_no/solarroof 2. How would one go about adding navigation like the attached screenshot? TIA