Jump to content
Search Community

GSAP and Svelte

JasonD test
Moderator Tag

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

  • 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 @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

  • 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

  • 4 months later...
On 9/29/2020 at 3:13 PM, ZachSaucier said:

Hey BrownsFanForLife. GSAP works great with a lot of different frameworks and tools! Unfortunately we don't have the capacity to make tutorials on how to use GSAP with all of them. Our workload is very full just making resources about GSAP itself. 

 

This makes a lot of sense, and you couldn't possibly be expected to keep up with every new shiny thing even if you wanted to.

 

Having said that, I think Green Sock is missing an opportunity now. Because Svelte isn't just another React style framework. And having proved itself over the past few years, it's hitting a sweet spot of adoption/maturity/interest ...and without an obvious goto framework for more than the most basic animations, and nothing at the level GSAP can provide.

 

Saying It works great with Svelte just like it works great everywhere  (paraphrasing) maybe true enough, but it's not great marketing if given a chance to address a rapidly growing community of Svelte devs. Whenever possible, show don't tell. Showing actually helps. If you could push forward a huge number of really detailed and well designed examples, to cement the notion that GSAP and Svelte are a great match, it would probably really help grow your user base and broaden adoption.

 

Otherwise, if there are any Svelte nerds who want a designer to team up with on a showcase, please let me know. I would like to demonstrate page transitions using SVG masks, some scrolltrigger animations and whatever else we can dream up. Examples like this using the new routing conventions of Svelte 1.0 are few and far between. I can't actually find any. We could develop them on http://codesandbox.io/ 

Link to comment
Share on other sites

Thanks for the suggestions. Yeah, we'd love it if folks like you contributed some solid demos, perhaps in CodeSandbox or Stackblitz. We're just not experts with Svelte, but I did a very quick fork of a CodeSandbox I found and dropped GSAP in there: 

https://codesandbox.io/s/sweet-sunset-eqkr8u?file=/Button.svelte

 

Does that help at all? 

Link to comment
Share on other sites

Absolutely, it helps! And proves I think you don't need to be Svelte experts to make very useful contributions. :) (sidetone: I couldn't stop clicking the button... very engaging.) 

 

Meanwhile if anyone wants to tackle anything more in-depth – page transitions in particular, please reach out. I'll keep an eye on this thread and post back with whatever I can hack together myself. Thanks again.

  • Like 1
Link to comment
Share on other sites

Hi,

 

We just created a couple of collections with starter templates for using GSAP, ScrollTrigger and ScrollSmoother in Svelte and SvelteKit.

 

Svelte

https://stackblitz.com/@GreenSockLearning/collections/gsap-svelte-starters

 

SvelteKit

https://stackblitz.com/@GreenSockLearning/collections/gsap-sveltekit-starters

 

Adding page transitions animations is on our todo list, so as soon as we have something in that area we'll make an announcement in this thread.

 

Happy Tweening!

  • Like 4
Link to comment
Share on other sites

@Rodrigo This is super helpful. Can't tell you how much it makes more clear for me personally, I am sure others are also going to get a lot out of it.

 

If from a designers POV I could give you any input on the page transition examples when you're ready, I think I have a good read on the sort of transitions people want to accomplish...or the sort of examples that would be most helpful (i.e. not just cross-fading 😅). Anyway. Really looking forward to those.

 

Meanwhile, I'll be picking these latest examples apart, just enjoying the code comments and seeing it all running on the latest version of SvelteKit...bravo.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

@mspanish I think you maybe forgot to save your fork? The link you provided is to a GreenSock Stackblitz. So it's difficult to offer you any advice without seeing your minimal demo in context. :) 

 

Here are the collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. And please clarify what you mean by "I'd have to switch to tweenTo to animate to an absolute y position" - I'm not sure what tweenTo() has to do with animating to an absolute y position. 

Link to comment
Share on other sites

I'm still pretty fuzzy on what you're asking here, sorry.

 

If your goal is to animate them to all line up vertically at the same spot, there are 3 entirely different approaches you could take: 

 

1) Normal document flow -> offset with transforms

If you want the elements to be in the normal document flow (in this case the boxes stack vertically) with no transforms or anything...and then apply transforms to make them all look like they're at the same vertical position. So, for example, if they normally sit 100px apart from each other, the 3rd one would get y: -200, the second one would get y: -100, etc. You can easily calculate this using getBoundingClientRect(). 

 

2) Initially use position: absolute (all overlap) but use transforms to offset them -> then animate to y: 0

This is sort of the backwards approach - you take them out of the document flow, stack them all on top of each other, and offset them initially with transforms. So for example, the first one has y: 0, the second one has y: 100, the third has y: 200, etc. Then animate them to y: 0.

 

3) Use CSS for whatever you want -> use Flip plugin to animate

This is a super powerful technique that can make things much easier. Let your elements be position: relative in the normal document flow. Then, capture the state with Flip plugin and then make whatever changes you want to the layout. You can literally apply/remove classes to make them position: absolute, sitting right on top of eachother or whatever. Then, run Flip.from() and Flip will handle making it all look seamless. 

 

I'd highly recommend watching the video at https://greensock.com/docs/v3/Plugins/Flip

 

I hope that helps. 

Link to comment
Share on other sites

Hey Jack - thanks.  I think #3 would work great.

 

Working on some alphabet stuff w/ drag & drop, build a word kind of thing for kids.  So for words they'll always be lining blocks up horizontally. Just seems a pain to have to calculate and add an offset to each box, depending on where they dragged it from. For this kind of thing absolute works nicely.

 

Have not used Greensock in a while! Look forward to diving back in. I usually end up making things way more animated and cooler just because you guys make it easy :)

  • Like 3
Link to comment
Share on other sites

  • 9 months later...

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.
×
×
  • Create New...