Jump to content
Search Community

Violetta

Premium
  • Posts

    13
  • Joined

  • Last visited

1 Follower

About Violetta

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Violetta's Achievements

  1. That's exactly how I wanted it! Thank you! Funnily enough, I already had this variant, but it didn't work for me because for some reason this code was still included: ScrollTrigger.config({ limitCallbacks: true }); But I can't remember why :-). If I remove this code, then it works as intended. Thank you for your help.
  2. here is the Codepen example: https://codepen.io/alsodenn/pen/MWpgKJg So you understand what I mean: First scroll down a bit, then right-click with the mouse and select "Reload Frame" in the context menu of the browser. Then scroll up again. Now the red boxes will be faded in. But I would like them to be already there and not to be faded in. Do you understand what I mean?
  3. I have various elements that should be faded in when they appear in the viewport. This works so far: gsap.utils.toArray(".animate-trigger").forEach((trigger, i) => { ScrollTrigger.create({ trigger: trigger, start: "top 90%", toggleActions: "play complete complete complete", toggleClass: "animate", }); }); But if you scroll down a bit and refresh the browser and then scroll up again, the elements are also faded in. I don't want that. I only want the elements that are below the viewport to be faded in and the ones above are simply already there without animation. I tried the keyword "complete". But that seems to be wrong :-). How do I do that?
  4. Thank you! Yes, that helps a lot! 1. In the preview version, the elements above the viewport are already shown. 2. With limitCallbacks: true the elements are not yet visible, but are faded in once when scrolling up. I think it's good that you have both variants. I have now decided on variant 2 until the new release has been released. Thank you!
  5. I would like the elements to be faded in only once, once they are there they should not be faded out and in again.
  6. I try my 1st steps in scroll trigger, but I have a simple problem. I can't show the problem with a codepen, so I've created a small example here: https://www.violetta.ch/example/scrolltrigger-testcase.html#test When I scroll down it works, the elements are faded in. But when I scroll up, nothing happens. If I remove "once: true", it works, but every time, but I only want it to fade in once. And yes I would like to solve this with CSS animation :-). What am I doing wrong? Or how can I solve that?
  7. If I want to toggle a class on another object, the class "undefined" is set instead of the one I want. Here the example: https://codepen.io/alsodenn/pen/WNrNNap
  8. 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!
  9. 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 :-).
  10. 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?
  11. 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!
  12. 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?
×
×
  • Create New...