Jump to content
GreenSock

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

Violetta

ShockinglyGreen
  • Posts

    5
  • Joined

  • Last visited

About Violetta

Violetta's Achievements

Newbie

Newbie (1/14)

1

Reputation

  1. I have it! I do not know why that was the "mistake", but no matter. What I have done: - removed all installed npm modules ("node_modules" folder) - removed package-lock.json - removed yarn.lock Then I did "npm install" again. And now it works wonderfully :-). Again thank you Dipscom for your help and patience!
  2. I have now created a reduced bundle. And the reduced bundle works as desired! HAHA Thus, the reason is somewhere else .. But now I can exclude one after the other ... Thank you for your patience. If I found out more and do not know further, I write here again :-).
  3. Hi Dipscom I know what you mean. The problem is, there is no error message :-). That's just strange. The only warning message is this during the gulp process: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. This is my first project with webpack :-), so my experience is limited. Before I invest hours and make a bundle (I do not know if that really helps, because there are a lot of dependencies), here's what it looks like right now: https://www.violetta.ch/typo3conf/ext/va_template/Resources/Public/static_html/angebot.html Almost at the end it has 6 icons with text. On hover the icons are animated. At the icon number 1, 3, 5 and 6 the transform-origin is false. It is set inline to "0px center" at all, whyever. At the icon number 3 (Entwickeln) the transformOrigin should be "center center" for "#wheel_big" like in the code example above. Maybe that helps for workaround ideas? Is "0px center" the default value in greensock? Or do you have an idea for a workaround? Or what else could I try?
  4. Hi Dipscom Thank you for your reply. What do you want to see? Here are snippets from the gulpfile: let webpackConfig = { mode: (PRODUCTION ? 'production' : 'development'), module: { rules: [{ test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ["@babel/preset-env"], compact: false } } }] }, resolve: { alias: { TimelineMax: "gsap/src/uncompressed/TimelineMax", TweenMax: "gsap/src/uncompressed/TweenMax", TweenLite: "gsap/src/uncompressed/TweenLite", } }, optimization: { splitChunks: { chunks: 'all', }, }, devtool: !PRODUCTION && 'source-map' } // Combine JavaScript into one file // In production, the file is minified function javascriptBoilerplate() { return gulp.src('../../Private/Js/Boilerplate/app.js') .pipe(named()) .pipe($.sourcemaps.init()) .pipe(webpackStream(webpackConfig, webpack2)) .pipe($.if(PRODUCTION, $.uglify() .on('error', e => { console.log(e); }) )) .pipe($.if(!PRODUCTION, $.sourcemaps.write())) .pipe(gulp.dest(PATHS.dist + '/js')); } Or what do you need? Thank you for your help!
  5. Hi all I animated a few SVGs. Everything works as expected. Now we wanted to go live and I uglifyed the webpack JS code with gulp-uglify. But now the transform-origin of the animations are no longer correct everywhere. I put it this way: iconAnis.tl_icon3 = new TimelineMax({ useFrames: true, paused: true }); var tl_icon3_2 = new TimelineMax({ repeat: -1, paused: false }) .set('#wheel_big', { transformOrigin: 'center center' }) .from('#wheel_big', 100, { rotation: -360, ease: Power0.easeNone }); iconAnis.tl_icon3 .add(tl_icon3_1) .add(tl_icon3_2, 0); But after uglifying I see the inline style "transform-origin: 0px center;". And if I remove the transformOrigin in JS and set it via CSS, it also does not have the intended impact on the animation: #wheel_big{ transform-origin: center center !important; } I use: "gulp-uglify": "^3.0.1" "gsap": "^2.0.2" "webpack": "^4.20.2" "webpack-stream": "^5.1.1" "gulp": "^4.0.0" "gulp-babel": "^8.0.0" Any ideas how I can fix that?
×