Jump to content


  • Posts

  • Joined

  • Last visited

aok's Achievements

  1. I can write it as a forEach no problem BUT it would've been nice to have used Alpine's x:on-mouseenter and x:on-mouseleave's directives. const linksWithHoverStates = document.querySelectorAll('.link-hover-state'); linksWithHoverStates.forEach(link => { const el = link.querySelector('span.link-hover-state-text'); const split = new SplitText(el, { type: 'chars' }); let shouldStop = false; const tl = gsap.timeline({ repeat: -1, paused: true, onRepeat: () => { if (shouldStop) tl.pause(); }, repeatDelay: 0.5, }) .set(split.chars, { opacity: 0 }) .to(split.chars, { duration: 0.01, opacity: 1, stagger: { each: 0.08 } }); link.addEventListener('mouseenter', (event) => { shouldStop = false; tl.restart(); }); link.addEventListener('mouseleave', (event) => { shouldStop = true; }); });
  2. Thanks both @Rodrigo and @mvaneijgen – so appreciated. One final thing. If I want to use this as a function across a site which passes in different elements/strings to be split and then animated on mouseenter/mouseleave what is the best way to do it? On mouseenter event I could call a function that passes in the element and vice versa on mouseleave but I'm not sure how to use the same timeline instance for the mouseenter/mouseleave? I thought the following would work but you can see the issues... https://codepen.io/richardcool/pen/eYjePPx
  3. Yes. But I think if I set it to pause() instead of pause(0) then it would work so that's fine. See my updated CodePen https://codepen.io/richardcool/pen/ZEjaMJe – when you mouseleave it plays out the current repeat iteration then pauses at the end (which visually looks the same as before you start) so that's fine
  4. Hi @Rodrigo apologies for not being clear. In my CodePen, when you mouseenter it all works great. When you mouseleave it plays the current repeat iteration but then it applies the initial gsap.set which sets the characters to opacity: 0. I would've thought progress(0) or pause(0) method would set the timeline to before this?
  5. I've got something working which looks good BUT on mouseleave I have to set it to pause(0) but then that adds in the initial opacity: 0... https://codepen.io/richardcool/pen/ZEjaMJe
  6. Thanks for your help @mvaneijgen – really appreciated. I think my plan would be on mouseenter is plays and loops, maybe with a 1 second delay, then on mouseleave it finishes the current iteration?
  7. This looks good! So .reset() I guess doesn't exist, does it? So mouseleave is redundant? I guess this could work too... and it just always plays it out.
  8. I have a bit more progress to show... but have had to use SplitText. On mouseenter it runs, which is great, but I can't figure out how on mouseleave it would reset (with the text set to opacity: 1) https://codepen.io/richardcool/pen/qByPzyP
  9. I'm attempting to create a text (link) hover effect whereby if the mouse hovers over the link it would type the text out one by one but if the mouse hovers away it would return it to the full original text (like a reset). I'm getting a bit lost with what approach to take. Should I simply set each letter opacity to 0 and show one after another? Should I set the innerHTML to empty then add in one letter at a time using the Text plugin? I have a simple CodePen set up, which uses Alpine.js to speed up some of the "on" events but struggling to know where to go next with this. I've had a good look through the forums and demos but can't really find what I'm looking for. Any advice or examples would be appreciated.
  10. Thank you so much @Sam Tremblay – this was a great shout and much appreciated. Makes a lot of sense now!
  11. I have a simple crossfade set up, which works fine, but it runs on repeat/loop. Upon reaching the final item I'd like the final item to fade out (or if it's easier the whole containing element) and then stop. I have a simple CodePen set up so hoping someone can help... getting a bit stuck with how to achieve this. Thanks.
  12. Thanks so much for this. Yes this is great. I wonder why we can't use % values from top?
  13. Thanks for the help but I don't think this is right. This would mean when the top+100% of the trigger hits the bottom of the scroller? Is that right? I get so confused by it. I've updated the CodePen but now it never fires.
  14. Apologies for the very short question but I can't seem to find an answer anywhere. With ScrollTrigger I am trying to start the trigger 100% from the top of the viewport (so 100vh, technically) but I can't seem to work it out. ScrollTrigger.create({ start: 'top+=100% top', end: 'bottom bottom', onUpdate: (self) => { self.direction === -1 ? headerStore.hide() : headerStore.show() }, markers: true }) I thought the above to run when the top of the trigger hits the top+100% (or even just 100%) but neither seem to work.
  15. Thanks again for the help @Rodrigo – much appreciated. I think I understand this but I'm a little stuck with what I need write in the onUpdate for the scroll up (to essentially set the progress to 1) but then if you scroll down, then it binds the progress again. https://codepen.io/richardcool/pen/dyjvVBw