Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 04/21/2024 in all areas

  1. Happy to share my solution: https://codepen.io/ceribbo/pen/ZEZmqvL By editing the one found on this post:
    1 point
  2. We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.
    1 point
  3. Hi @PapaDeBeau. Are you talking about with ScrollSmoother in particular? Or a non-ScrollSmoother-controlled page? It'd definitely increase your chances of getting a solid answer quickly if you provide a super minimal demo showing just a basic idea of what you want to do (even if it's not functional). And are you trying to navigate to an anchor onclick or when the page loads? ScrollSmoother has a very easy way to animate to a particular element: https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() And if want to do that onload, @Cassie already had that in her demo. You could do: window.addEventListener("load", () => { let urlHash = window.location.href.split("#")[1], scrollElem = document.querySelector("#" + urlHash); if (scrollElem) { // if you've got a ScrollSmoother instance... smoother.scrollTo(scrollElem); // otherwise... gsap.to(window, { scrollTo: scrollElem }); // don't forget to load/register ScrollToPlugin } }); Does that help?
    1 point
  4. Hey @Nysh What worked for me, was setting the span to 'display: inline-block' and also setting a width to it. span.spacer { display: inline-block; width: 85px; } This way you also don't have to worry about how many empty characters you would have to fit inside the span. Just make sure, there is at least one. <span class="spacer">&nbsp;</span> https://codepen.io/akapowl/pen/daa45d6aff0c7605a759ff5bec41f2bb
    1 point
  5. Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon). Hope this helps.
    1 point
  6. If I'm not mistaken @Dipscom has some experience with Svelte in production, chances are that He has used it with GSAP as well.
    1 point
×
×
  • Create New...