Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About limbo

  • Rank

Recent Profile Visitors

329 profile views
  1. Nice. That worked a treat. As you added that I also found another post here that demo'd a great way to calc vh/vw to then use as variables: const vh = (coef) => window.innerHeight * (coef/100); const vw = (coef) => window.innerWidth * (coef/100); Which can be used like: ScrollTrigger.create({ trigger: '.my_elem', start: vw(10) + ' top', end: vw(10) + ' top', onEnter: enterFunc, onLeaveBack: leaveFunc }); Thanks for the pointer
  2. Hello I'm working on a build and want to use GSAPs features to run a enter/leave functions. Got it working well so I can handle some class changes to the body but I'd love it if the trigger points could be vw as the grid is all based on vw units and everything scales from there. Simplified code: ScrollTrigger.create({ trigger: '.my_elem', start: 'top 10vw', end: 'top 10vw', onEnter: enterFunc, onLeaveBack: leaveFunc }); Those two vh units don't work in this usecase (as far as I got with it in any case)... any assistance or pointers woul
  3. Still working on this and found a nice way to cope with the problems I was having with custom font... only run revert on resize. Seems obvious now. function debounce(func){ // to throttle var timer; return function(event){ if(timer) clearTimeout(timer); timer = setTimeout(func,150,event); // 150ms seems like a good sweetspot }; } window.addEventListener("resize",debounce(function(e){ mySplitText.revert(); })); Needs testing on device - works well on desktop inc. Safari OSX.
  4. @Carl - thanks for the explaination video/examples. It's very helpful to see it broken down like that. Nice. @OSUblake - thanks too. Great to see the different approaches. Both approaches really help to highlight scenario/state based transitions/timelines and the logic needed to corral mouse events. Good stuff.
  5. FWIW pointermove has pretty good support: https://caniuse.com/mdn-api_document_pointermove_event Safari 12 is the closest to support timewise (2019) - FF/Chrome/IE11/Edge all pretty good. I'll probably just add the standard CSS cursor back for older versions with a media query.
  6. Thanks @akapowl (and by proxy @GreenSock for resolving in that case). Good to know there's a resolution for 'most' browsers. I can target those without support and do something a bit simpler. Cheers Edit: Updated codepen, works well in OSX Safari/Chrome/FF 👍
  7. Thanks. It's kind of a both question IMO. Defo related to Swiper but also how the GSAP code I'm using handles it — I've made a big assumption it'd happen on any draggable element...
  8. Hello I'm 90% there with some custom cursor work - and wondered if anyone could spare a few mins to help me resolve a bug with the dragging of the slides with the custom cursor in place. When you click & drag (swiperJS in this instance) the cursor doesn't follow the motion and snaps back on click release. I'm sure I've seen an example somewhere (codrops possibly) where it didn't do this - but I'm stretching my GSAP knowledge here. Any ideas? Thanks. (p.s - the content/effects below the slides are basic function tests - can ignore those).
  9. Thanks for the excellent replies @Carl & @mikel — one or either should help shore up this job. It's for a very specific control of an index page including image mask and splittext animation — so having a nice back-up method to help predict / and or / trigger slicker results will be ideal. Can use my original method for text links where the outcome isn't as important (underline moving in from left and out right onleave). ta
  10. Thanks. That works really well.. until you quickly move your mouse over the target trigger. Then the playback is ruined. Any catch all defence for this sort of mouse event?
  11. Hello I've stared at this for far too long. Seems simple enough to get it to this point but can't get it over the line... How would you reset a hover animation once it's completed (onmouseLeave)? Took me a bit of headscratching to get it to a point where I could run the animation on any given link (native forEach method - ALL the other similar examples I could find were using jQuery)... But this little issue is stumping me... I've tried resetting via "clearProps" but could't get it working as expected. The production site timeline is a fair bit more complex than this b
  12. Hello Jack I did try tag:"span", — but as I'm using lines it doesn't seem help or make any difference in that respect. Thanks for the suggestion though.
  13. Last addition to this. On longer text passages... with some webfonts... with text over multiple lines... in safari (v/OS as above)... depending on line length and ragged edge paragraphs... sometimes words will find a home on the next line when .revert() has finished. Very ugly. The only way I could get round this was target safari and add <br> via the CMS where I needed them in the passage and be super mindful via media queries (I'm already detecting Safari as it is). Will also need to the run the splittext + revert again on resize. This won't work we
  14. Just to add - as this tiny fractional jump was being stubborn after .revert Some custom webfonts (the one I was using, of course) will force what looks like ligature adjustments (fi or ff for example) in Firefox and Safari (OSX Big Sur), regardless if these are set or unset with the CSS: font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-font-feature-settings:normal; font-feature-settings:normal; The only workaround I could find was to set css letter-spaci
  15. limbo

    Batch + Scrub

    This was a great read. Thanks 👍