[Question about toggleActions]

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.

[Question about toggleActions]

here is the Codepen example: 

See the Pen MWpgKJg by alsodenn (@alsodenn) on CodePen

 

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? 

[Question about toggleActions]

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?

[ScrollTrigger + once:true + toggleClass = elements above are not triggered]

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!

[ScrollTrigger + once:true + toggleClass = elements above are not triggered]

I would like the elements to be faded in only once, once they are there they should not be faded out and in again.

[ScrollTrigger + once:true + toggleClass = elements above are not triggered]

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?

 

See the Pen by example (@example) on CodePen

[ScrollTrigger: toggleClass with object don't work]

Now it works! Thanks for the quick response :-).

[ScrollTrigger: toggleClass with object don't work]

If I want to toggle a class on another object, the class "undefined" is set instead of the one I want.

Here the example: 

See the Pen WNrNNap by alsodenn (@alsodenn) on CodePen

[Problems after uglify JS webpack code]

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!

[Problems after uglify JS webpack code]

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

 

 

[Problems after uglify JS webpack code]

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?

[Problems after uglify JS webpack code]

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! 

[Problems after uglify JS webpack code]

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?