simple/other front-end technology or framework similar to the below website animation

see the site example below. How can i achieve this kind of animation using css, javascript or jquery. zoom in/zoom out events.

https://us.pg.com/

can you give me an example.

thanks.

  • Why webpack generates error on using image URL on SASS file?

    I have TypeScript and SASS loader on webpack 4, But It generates an error when I am trying to use an image URL inside any SASS file. I already try to use file-loader/ url-loader But it generates the image into a new folder. I don't want it.

    I am not using any framework. I need to compile the SASS with image URL, But I can't use any image in my SASS files.

    Can anyone help plz, I am trying it from 3 days.

    packages.json > dev-Dependencies

      "devDependencies": {
        "css-loader": "^3.6.0",
        "file-loader": "^6.0.0",
        "lite-server": "^2.5.4",
        "mini-css-extract-plugin": "^0.9.0",
        "node-sass": "^4.14.1",
        "sass": "^1.26.10",
        "sass-loader": "^9.0.2",
        "style-loader": "^1.2.1",
        "ts-loader": "^8.0.0",
        "typescript": "^3.9.6",
        "url-loader": "^4.1.0",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.12"
      }
    

    webpack.config.js

    const path = require("path");
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    
    module.exports = {
    
        watch: true,
        devtool: "source-map",
        mode: "development",
    
        entry: {
            bundle: path.resolve(__dirname, "./src/ts/bundle.ts"),
        },
    
        output: {
            path: path.resolve(__dirname, "./dist/"),
            filename: "js/[name].js"
        },
    
        module: {
            rules: [
    
                //typescript loader
                {
                    test: /\.ts$/,
                    use: 'ts-loader',
                    include: [
                        path.resolve(__dirname, 'src/'),
                        path.resolve(__dirname, 'modules/'),
                    ],
                    exclude: /node_modules/, 
                },
    
               //sass|scss loader
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
    
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                    ]
                },
            ]
        },
    
    
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/[name].css',
                chunkFilename: 'css/[id].css',
            })
        ]
    }