Jump to content
GreenSock

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

GSAP and Svelte

Recommended Posts

I know it's new, but dang it seems like the perfect marriage with GSAP.

 

Clean, small and simple.

 

Would love to see some blog posts on how to bring these two together in powerful ways.

  • Like 1
Link to comment
Share on other sites

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. 

 

With that being said we welcome other people to make tutorials about connecting GSAP to other frameworks and tools! Feel free to share with us if you write tutorials for people.

Link to comment
Share on other sites

If I'm not mistaken @Dipscom has some experience with Svelte in production, chances are that He has used it with GSAP as well.

  • Like 1
Link to comment
Share on other sites

Indded I have. In fact, right at this time I am working on a web app that is built with Svelte and will make use of GSAP.

 

There's no mystery to work with GSAP and Svelte. Load up the library via CDN (I just prefer that way, saves on the js bundle and takes advantage of caching) then GSAP away.

 

Did you have any particular question?

  • Like 3
Link to comment
Share on other sites

If you try to have a go and get yourself stuck, let us know. And remember you can get bind a reference to the DOM element with:

 

<script>
  let reference;
</script>

<Element bind:this={reference} />

 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

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.

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

  • 5 weeks later...

Hi guys... Just an FYI... I'm rebuilding my own portfolio site and using Svelte, GSAP, primarily to make use of ScrollTrigger eye candy in a <canvas> wrapper w/ Pixi... Hoping I get get the liquid smooth animation w/ canvas. Also looking at Blakes "smooth mouse wheel scroll" vs. LocalMotion or some other bigger library just to get that app-like feel.

I'll share as I have time...

Also, another HUGE difference this time around is that I am using XState for an FSM... it also plays very nicely w/ Svelte. Because of the large amount of scenes and concurrent animations I have planned, a state machine makes more sense than trying to use the Svelte store, which is great for a Pub/Sub kind of architecture. Again, will post some Code Pens (or even make my private portfolio site publicly available on GitHub).

Thanks guys! It's great to hear I'm not the only one thinking Svelte + GSAP is a great pairing. After all, Rich Harris eats and breathes reactive info-graphics all day, so with performance in mind, seems like peas and carrots. :)

  • Like 2
Link to comment
Share on other sites

Ah, state machines. It's been on my reading list for so long... I am yet to get my hands on it and try some implementations.

 

Share whatever you can, it's great to see how other people approaches.

  • Like 1
Link to comment
Share on other sites

Hi folks... I have an update, but it's not a code update, but rather a decision update...

After a deep dive in XState, I found another library that has a learning curve about as steep as GraphQL, or even GSAP. It's a 13kb library, and I found it much more confusing than a few barebones FSM's, like Robot (probably #2 in the JS FSM arena), which is only 1kb in size and makes some design decisions that streamline what XState can do, but it keeps it functional and it's lite on all the features.

But nearly all those features are already provided by GSAP.

I was sold on the switch from XState to Robot, but then I decided to take the Xstate course on Frontend Masters w/ the author, and before he explained XState, the first 20 minutes was creating a basic functional finite state machines w/o any libraries...

I actually found that simple exercise to be the most profound, because GSAP has much of what I want to do already built in... state change delays could be done w/ a simple delay value and an "onComplete" callback.

So... Here is the update. I doubt I will be using either XState or Robot, but rather a very streamlined fsm that only handles the basics, and I'll let GSAP timelines do the rest... I just feel this is the best of both worlds.

Lastly, Svelte's framework makes it really easy to make these into simple, well-encapsulated modules, and the syntax magic to shorten the expression even more. I'm confident that tiny functional fsm will be all that's needed, faster than a library, and a great opportunity for me to wrestle with the whole function within a function, within a function thing...

More updates coming as I get to coding...

My site will be done faster too :)

  • Like 1
Link to comment
Share on other sites

On 10/20/2020 at 2: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.

This is really helpful, I since am learning javascript, svelte and sapper...  And, I would like to add animation via GSAP to web apps... I thought I would try to contribute something back...
Here is a tweak to the onMount example that seems to eliminate the 'gsap not defined' error.   I also have found that this technique also seems to work in sapper apps.  
https://svelte.dev/repl/05ed848f455848a2a69db90dc0a1d1c1?version=3.29.7

  • Like 3
Link to comment
Share on other sites

Nice one Sae Woo. I'll be using that for my own experiments.

  • Like 1
Link to comment
Share on other sites

@Sae Woo it turns out that we can simplify your approach even more and there's no need to use the header script either.

 

I've updated my own examples:

 

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).

 

Thanks for bringing that to my attention. Learning everyday. :)

 

EDIT: Upon further testing, it appears you don't even need the import gsap from 'gsap'; line for GSAP to be included in the RELP. That truly is black magic to me. 😦

  • Like 5
Link to comment
Share on other sites

  • 3 months later...
On 9/30/2020 at 11:09 AM, Dipscom said:

...Load up the library via CDN (I just prefer that way, saves on the js bundle and takes advantage of caching) then GSAP away.


@Dipscom I want to keep my (lighthouse) blocking time, at an absolute minimum, as well as getting as fast as possible first contentful paint.
How do you load the library via CDN, after the page has loaded?

Link to comment
Share on other sites

There are a few different ways, it boils down to what you are supporting and how your project is setup. The "modern" way of prevent the parse-blocking is to add `defer` to the <script> tag (or the `async` one).

 

<script defer src="blah.js"></script>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

 

The old skool way is to have only a tiny, tiny script at the bottom of your body tag that runs only after the `DOMContentLoaded` and the `load` events have fired. This tiny script then adds all other <script> tags to the <head> dynamically.

  • Like 5
Link to comment
Share on other sites

  • 4 weeks later...
On 11/28/2020 at 11:15 AM, Dipscom said:

@Sae Woo it turns out that we can simplify your approach even more and there's no need to use the header script either.

 

I've updated my own examples:

 

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).

 

Thanks for bringing that to my attention. Learning everyday. :)

 

EDIT: Upon further testing, it appears you don't even need the import gsap from 'gsap'; line for GSAP to be included in the RELP. That truly is black magic to me. 😦

@Dipscom Thanks for these examples guys!

 

I've installed GSAP in my svelteKit project using pnpm.

 

For some reason, using tl.from does not work in svelteKit.  When I use tl.fromTo or tl.to my test animates as expected but when I use tl.from the .text div remains hidden.

 

Here is my component:

<script>

import gsap from 'gsap';

import { onMount } from 'svelte';



onMount(() => {

  const tl = gsap.timeline();

  // Works

  tl.to('.test', {duration:1, autoAlpha:1, scale:1.5},">");

  // Does not work

  // tl.from('.test', {duration:1, autoAlpha:0, scale:0},">");


});

</script>



<div class="content">

  <div class="test"></div>

</div>



<style lang="scss">

@import "../theme.scss";

.content {

  .test {

    width: 100px;

    height: 100px;

    background: red;

    border-radius: 50%;

    visibility: hidden;

   }

}
</style>
 

 

Link to comment
Share on other sites

Hello!

 

You see in your CSS where you set visibilty to "hidden"? You're declaring the element's natural state to be hidden. Doing a ".from" tween will animate your element from the GSAP-declared values to the elements natural state. In order for you to achieve what you want, you need to not have the "visibility:hidden" set in your CSS or use the other tween methods that you have already noticed achieve your desired result.

  • Like 2
Link to comment
Share on other sites

52 minutes ago, Dipscom said:

Hello!

 

You see in your CSS where you set visibilty to "hidden"? You're declaring the element's natural state to be hidden. Doing a ".from" tween will animate your element from the GSAP-declared values to the elements natural state. In order for you to achieve what you want, you need to not have the "visibility:hidden" set in your CSS or use the other tween methods that you have already noticed achieve your desired result.

 

Thanks for the response Dipscom!

 

I'm confused .... How do I understand this then? (https://greensock.com/docs/v2/Plugins/CSSPlugin)

 

Quote

And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

Link to comment
Share on other sites

Yeah, that's very confusing, I agree.

 

The catch here is that the example is tweening TO an autoAlpha of 1. It is not tweening FROM an autoAlpha of 0.

 

.from() tweens have some quirks most people get caught on. You're just the newest victim. :)

 

Because you are using a .from() tween, GSAP records the natural state of the element and uses it as the resulting effect of the animation. In your case, it includes the "visibility:hidden" which makes it not show.

 

If you were tweening .to() an autoAlpha of 1, as the example in the docs show, GSAP will assume, because of the "visibility:hidden" that the opacity rule should be zero. So, it toggles the visibility to "visible" and sets the opacity to zero then, it tweens it to one.

 

Does that clear your confusion?

Link to comment
Share on other sites

Thanks for the effort to help me.! I must be missing something. Here is a Codepen where the same .from statement is working perfectly. It just doesn't seem to work with svelteKit.

 

See the Pen zYNaVJB by sonya-ninja (@sonya-ninja) on CodePen

Link to comment
Share on other sites

Shucks! I think I've figured out why if wasn't working. I'm such an idiot!

 

I had multiple components on the same page:

 

<Card  myProp="10"/>

<Card  myProp="20"/>

<Card  myProp="15"/>

<Card  myProp="30"/>

 

I think my animation was showing - hiding - showing - hiding. The final result was hidden.

 

How do I handle timelines for each version of the component individually?

 

When I only have a single version of the component then the .from statement works as in the codepen.

Edited by Sonya.Ninja
Link to comment
Share on other sites

Well, I stand corrected. Everything I said so far in this thread has been proven wrong.

 

As for the new question. You should target the instance of the component, I'm not able to work out which is the correct syntax as I'm messaging from a phone but, it should be something along the lines of "$el".

  • Haha 1
Link to comment
Share on other sites

You rock! Thank you so much. I'll google $el and see what I find. Don't worry about being wrong - your reputation is intact. I've seen hundreds of threads where you got everything correct. :)

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.

×