Jump to content
GreenSock

BrownsFanForLife

GSAP and Svelte

Recommended Posts

  • 2 weeks later...

Was not sure if I should have made a new post but ...

 

@Dipscom I would love to get with you some time and just pick your brain (or any one else that wants to). I have been playing with svelte/gsap together for awhile. I started with a scrollTrigger component. I have had some issues with refreshing and destroying the components right, but got some cool stuff working.

 

I see in your repls you return a call back method tick with duration equation. You mentioned it having to do with svelte working on ms so you need to change it? I kinda got lost on why this is necessary but I think not having it is why I have issues trying to use gsap animation as directives like in: out: and only works well with use:actions. I don't have code in any repls atm just on github but I will try to get some examples together.

 

Wonder if someone more big brain than me knows if Svelte reactive variables are too slow to work right with gsap. I am pretty sure Rich Harris mentioned something about svelte not being fast enough to keep up with 60fps on slower devices with its own animations (but uncertain I heard it right). 

 

I have a few cases were I am returning data from a $: reactiveVar to feed gsap.objects and the animations on mobile just chug bad, but if I hit the buttons fast to keep calling the functions/animations over it seems to not lag...? I tried looking in dev tools and noticed lots of micro functions (assume from svelte doing its magic) while the animation starts to fire. So maybe its an issue of my poop code or I just idk... 

 

All in all I love both gsap/svelte so much I really want the marriage of the two to work so bad! .. and work well. I know lots of neat stuff has been done with Vue and Gsap, and I might look into that more too, but no reason it should not work just as good or better with Svelte.  I figure I am still just not advanced enough to know the work arounds.

 

Cheers,

B

 

Link to comment
Share on other sites

On 5/1/2021 at 7:45 AM, b1m1nd said:

I see in your repls you return a call back method tick with duration equation. You mentioned it having to do with svelte working on ms so you need to change it? I kinda got lost on why this is necessary but I think not having it is why I have issues trying to use gsap animation as directives

 

The duration property in GSAP is in seconds, the equivalent in Svelte is in milliseconds, hence the need to convert the values.

 

I like GSAP, I like Svelte, I like talking to people who like GSAP and I like talking to people who like Svelte. I think I would like to talk about GSAP and Svelte at the same time. Word of warning, though, I have been knee deep on a PHP project with no animations so far, you will have to help me jog my memories on stuff.

 

So, go ahead, make some RELPs and let's geek out.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Hey, @Dipscom!

 

Do you have any experience with combining ScrollTrigger and a smooth-scrolling library (such as smooth-scrollbar) in Svelte?

 

I seem to be able to get the two to work just fine independently, but I'm having trouble bringing them together via ScrollTrigger's .scrollerProxy() method. The animations created with ScrollTrigger stop working after enabling smooth-scrollbar, and using .scrollerProxy() doesn't change anything.

 

I've created a small demo in this Svelte REPL as an example of this. It's structure is very much like that of my project—I'm managing ScrollTrigger animations in their respective component files while trying to add smooth-scrollbar to App.svelte.

 

The results are very much the same, too. The ScrollTrigger animations should work normally if you comment out the smooth-scrollbar code, save, and refresh the page.

 

I'd be grateful if you took a look!

 

Here's my original forum post for this, BTW.

Link to comment
Share on other sites

 

Hey @ApplePieGiraffe

 

I just answered on your original post.

 

Got the animations to be smooth and pinning to work as expected - just not sure about the Svelte part of it as I'm not versed with that.

 

 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hello @Dipscom,

 

I just started adding gsap in a sveltekit app to add some scrollTo anchor event. I have some issue making it happen. Would you have any experience with this plugin ? I have a very simple repl here of what I am trying to achieve https://svelte.dev/repl/98ac744db8744ebaa08de3f4f3f6c193?version=3.38.3 

 

Since it is the first time I try to work with gsap, I guess I am doing something wrong, but I can't wrap my head around this. Any help would be greatly appreciated. Thanks a lot !

Link to comment
Share on other sites

Hey @sdelon - Could you possibly start a new thread and explain what the issue is?

It seems to be working in the example you posted!

Link to comment
Share on other sites

Hey @Cassie,

 

Thanks for your answer, how strange ! It doesn't seem to work here as no transition effect seems to apply. It goes straight to the anchor without the gsap scrollTo effect which is why I thought there was a problem. I could definitely create a new thread, but I would not know how to explain the problem then. Again thanks Cassie !

Link to comment
Share on other sites

Wait, my mistake - I was looking at this quickly on a train and didn't realise you already had anchor links. I assumed GSAP was animating down to the section!

So if you have anchor links you need to prevent default behaviour - something like this.. ☺️
 

function goToAnchor(e) {
  if(e) e.preventDefault();
  gsap.to(window, { duration: 2, scrollTo: `#${params}`})
}

 

  • Like 2
Link to comment
Share on other sites

Fee-fi-fo-fum!

 

I smell a nosy english one.

Be them around, or be them offline,

I'll grind them  down to make my bread for stealing my thread!

  • Haha 2
Link to comment
Share on other sites

Ahahaha. Is this YOUR thread @Dipscom 😂

My sincerest apologies. 

  • Haha 2
Link to comment
Share on other sites

Thanks a lot @Cassie, that works now like a charm :-) And sorry @Dipscom for your thread. I will definitely open a new thread if I have any other question.

Link to comment
Share on other sites

  • 1 year later...
On 10/20/2020 at 10:01 PM, Dipscom said:

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.

@Dipscom These are nice examples. But how to import gsap? Your code says  import gsap from 'gsap';  But what does that exactly mean?  I get the

 

error Cannot find module 'gsap' imported from 'C:/Users/Svein Tore Narvestad/Documents/svelte/my-app/src/routes/test.svelte' 

 

 

Link to comment
Share on other sites

7 minutes ago, Svein-Tore said:

@Dipscom These are nice examples. But how to import gsap? Your code says  import gsap from 'gsap';  But what does that exactly mean?  I get the

 

error Cannot find module 'gsap' imported from 'C:/Users/Svein Tore Narvestad/Documents/svelte/my-app/src/routes/test.svelte' 

 

 

OK, npm install gsap was the thing  I needd👍

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×