smallio

Great example. Thank's @PointC! Will give this a shot now Cheers, Smallio

Hi guys, I've always found animating anchor links with CSS very laborious, however up until now it's been a bit too complex for me to do it with GSAP. I've decided to take a shot at it & have so far I've spliced together an example with fullpage.js & one of @OSUblake pens. At the moment the nav dots work on click, however I'm stuck updating them via scroll. My idea was to use the if statements but so far no cigar. Any ideas how this would be done in tandem? Cheers, Smallio

Ah awesome thank you! I'm working through understanding all of it & then i'll see what I can do. Cheers, Smallio

@Carl @Jonathan Thanks for the info guys. We actually managed to fix it by storing each split.chars in an array and looping through it with the index! A little trick @PointC showed me a few weeks ago. I'm now going to do the same with timelines & see how much I can learn. Really appreciate the examples Carl, we'll be studying these. Cheers!

@PointC Aha, I've been lurking Hope you are well! A few points in response... a) this is exactly what I need!! ... however somewhat complex to learn from, do you have any previous versions where it's trimmed down slightly? If not don't worry! b) how would one treat each timeline separately so you can have different items on each page but still navigate? I plan to have a few core elements stay the same from page to page, but everything else changing. Does that get a lot more complex? Thanks

Trying to learn a bit about more about complex animation. I've setup a little tab example here. Each section has a background & I'd trying to fade that in, once it's ready. I'm trying to start the correct timeline for the page, if a timeline is already playing it needs to reverse it & play the new one. Sounds super easy, but I've been stuck on the logic for a while now lol. Seems like I need to figure out how to attach a letter or number to each link & have it correspond to timelines. How would one go about doing this? Perhaps someone could show me with different coloured boxes or something? Cheers, Smallio

@mikel Brilliant, thank you. I was closer then I thought! I tried using it outside the function and it didn't work. How does the set not effect the current box when it's used in the function? Cheers, Smallio

Hi guys, I'm practicing slider logic at the moment & seem to be stuck scaling the coloured boxes correctly. After the final slide it breaks due to previous boxes remaining visible on top. I'd love to know more about how to prevent this! On each click I'm trying to get the current box to scaleX out from right to left and the new one to scale in like it already is. I've tried to condense the example down as much as possible. Cheers! Smallio

Hi guys, Trying to get better at controlling multiple timelines at once. I've gone with the multi-function + call/add method here, however because I've used functions I think it's stopping me from using .timeScale on the main timeline? I'd love to be able to reverse & mess with the timeScale of it, but it's not letting me. Secondly, I can't get rid of the little white parts that my masks cover, no matter how big I make the strokes. Are there any little hacks people know to get around both of these issues? Best, Smallio

ahhhh obviously!!! sorry blonde moment, aha. really appreciate the explanation

Thanks for the explanation @carl. I managed to get it working via another method It would, however, be awesome to know what is different then this little pen which sahil helped me on a while back. The code is essentially the same for that part yet when it's not used in a function it goes haywire! What am I missing here lol? Many thanks, Smallio

Working on a loader here & I've suddenly got this error which is stopping the whole pen from working. Any ideas? This seems to be the line that's causing the issue! var rotation = c[0]._gsTransform.rotation + 3.6 * parseInt(drawVals.start); Cheers, Smallio

So cool dude!

@pointC Damn!!! Once again dude, thank you so much A lot to learn from!!!

Thanks for all the info guys @PointC @Jonathan @Sahil Always had a bit of hatred for them & after all this info I'm gonna avoid lol ...

Hey guys, So i've been trying to recreate this nice little X with GSAP just to get better with child elements & transform origins. One of the things I can't figure out is how to correctly make this work with gsap transform origins & what the equivalent of before & after in css is. Any help would be greatly appreciated Cheers, Smallio

@PointC One last question on the whole "this" topic. Say you wanted to have three different pictures that are fullscreen in the background, none of them are showing to start but on the hover of each grey box it shows the correct picture correlating to box 1, 2 and 3 . How would one go about that as they are then targeted outside? Cheers, Smallio

@PointC thank you for taking the time to do all of this man, you are far, far too kind. Going to delve into this later tonight

@PointC Once again, thank you so much! Finally understanding the whole this/for each concept and it's blowing my mind. Going to save so much time in all future projects! Excited to learn more. From forum lurker, to gsap obsessed.

Not sure if this is bad etiquette to ask a question on another thread but as it was on the same topic I thought It would save the clutter. I was wondering how you would use this in combo with what you helped me with yesterday @PointC. The thing that confuses me is how to make the split text trigger via it's parent object. i.e. for each grey box on hover, trigger it's children eg the blue div & the split text together. I feel it's this part that's the problem, as it's referring to the title, not the grey box. $(element).hover(makeItWork2, makeItWork2); Thanks, Smallio

This is an amazing thread. I've learned so much from going through all the examples. @PointC you are the goat.

Perfect! Thank you. It was lol, but I decided this would be a simpler way of starting with for each & this! Will change the title

Hi guys, Sorry about that, was on the move when I posted. So basically I want to make the blue card slide in from the right side when you hover over each grey box (the blue box should be hidden 100% to the right but for purpose of demonstration it's 90%). Should be simple enough using "this", however I don't know how to make one piece of code that works on multiple sets of these (there are a lot more in the project it comes from). Thank's guys.

Hi guys, Just wondered if there was any examples of this style of hover. I'm struggling to make it work without the loop on several different titles. Thanks in advance Will

Thank's again mate, works perfectly