DEV Community: namdo

Animation with GSAP 3

namdo — Sun, 01 Nov 2020 16:21:59 +0000

💡 #svelte, #svelte-boilerplate, #smelte, #gsap3, #webpack, #tailwindcss

💡 GSAP 3 Docs

Let's do it.

Initial project using svelte-boilerplate template
Installing gsap

>_ yarn add gsap

Update src/App/index.svelte

<script>
    import Layout from '@Components/Layout';
    import { gsap } from "gsap";
</script>

<style src="./style.scss">

</style>

<Layout>
    <div class="container xl mx-auto">
        <div class="flex h-screen justify-center">
            <div class="mx-auto p-3" 
              use:gsap.from={ { duration: 3, opacity: 0, scale: 0.9 } }
            >
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>
</Layout>

Let's enjoyed

>_ yarn start:dev

hello world [svelte-boilerplate; smelte]

namdo — Wed, 28 Oct 2020 17:33:16 +0000

#svelte, #svelte-boilerplate, #smelte, #webpack, #tailwindcss

Let's do it.

Initial project using svelte-boilerplate template

>_ git clone https://github.com/pankod/svelte-boilerplate.git hello-word

Upgrade to lastest version of postcss-loader on package.json file

"postcss-loader": "^3.0.0", => "postcss-loader": "^4.0.4",

Installing packages

>_ cd hello-world && yarn install

Installing smelte, postcss, postcss-import, postcss-nested

>_ yarn add smelte postcss postcss-import postcss-nested

Update postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested')
  ]
}

Import tailwind css into Assets/css/global.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// ...

Remove line exclude: /node_modules/, of svelte-loader on webpack.config.js

rules: [
    {
        test: /\.svelte$/,        
        /*exclude: /node_modules/,*/
        use: {
            loader: 'svelte-loader',
            options: {
                emitCss: true,
                hotReload: true,
                preprocess: require('svelte-preprocess')([
                    scss()
                ])
            }
        }
    },
]

Update src/App/index.svelte

<script>
  import Layout from '@Components/Layout';
  import { TextField } from "smelte";
</script>

<style src="./style.scss">
</style>

<Layout class="layout">
  <div class="container max-w-full">
    <div class="w-auto p-2">
      <TextField textarea label="Hello World" rows="3" outlined />
    </div>
  </div>
</Layout>

Yeah !!!
Let's enjoy.

>_ yarn start:dev

hello world [svelte-boilerplate; svelte-material-ui]

namdo — Sun, 25 Oct 2020 16:52:30 +0000

#svelte, #svelte-boilerplate, #svelte-material-ui, #webpack

Let's do it.

Initial project using svelte-boilerplate template

>_ git clone https://github.com/pankod/svelte-boilerplate.git hello-word

Installing packages

>_ cd hello-world && yarn install

Installing svelte-material-ui, sass-loader

>_ yarn add svelte-material-ui sass-loader

Make default theme

>_ mkdir src/theme && touch src/theme/_smui-theme.scss

Adding sass-loader into webpack webpack.config.js

// ...
rules: [
    // ...
    {
        test: /\.(sa|sc)ss$/,
        use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    sassOptions: {
                        includePaths: [
                            './src/theme',
                            './node_modules'
                        ]
                    }
                }
            }
        ]
    },
    // ...
]

Remove line exclude: /node_modules/, of svelte-loader on webpack.config.js

rules: [
    {
        test: /\.svelte$/,        
        /*exclude: /node_modules/,*/
        use: {
            loader: 'svelte-loader',
            options: {
                emitCss: true,
                hotReload: true,
                preprocess: require('svelte-preprocess')([
                    scss()
                ])
            }
        }
    },
]

Update src/App/index.svelte

<script>
    import Layout from '@Components/Layout';
    import { Label } from '@smui/button';
</script>

<style lang="scss">
    .container {
      background-color: #000;
      color: #fff;
      display: flex;
      flex-direction: column;
      flex: 1 1 100%;
      justify-content: flex-start;
      align-items: center;
      min-height: 100vh;

      &__middle {
        display: flex;
        flex: 1 1 100%;
        justify-content: center;
        align-items: flex-start;
      }
    }

    .message {
        font-size: 3rem;
    }
</style>

<Layout>
    <div class="container">
        <div class="container__middle">
            <div class="message">
                <Label>HELLO WORLD</Label>
            </div>
        </div>
    </div>
</Layout>

Get ready for you !
Let's enjoy.

>_ yarn start:dev