JensK

Thanks guys,
with your comments our customer could get convinced that it is not a good idea to blur a 500kb image. They still wanted it and I ended up doing it the dirtiest way I could imagine, but it works fine.

What we do now is crossfading a blurred image and an unblurred version. No code example, because I think this should not reproduce.

This comment is meant as a thank you. Keep up the good work!

Thanks @GreenSock,

I feared it was something like that. Also thank you for your headsup on safari.

edit:

@Sahil Wow, thank you for that input. You posted just seconds before my original post

Hi guys,
I  created a quick codepen, because I wanted to see if I can "unblur" any html element I desire. I can't see the error in my thinking, why doesn't my linked codepen work?

What should happen? A blured text should unblur
What happens? Nothing

See the Pen WgOZYv by nahilep (@nahilep) on CodePen

Hey all,

I was sure that I had no TweenMax problem. The way I was trying to build my timeline was flawed. I found a better approach. First I loop over the array score and create score-objects which I can use then to build the timeline.

Hope it helps someone some day,

-Jens

Whooops, so I left out the most important part, sorry for that.

I have a queue of symbols which I loop over. (symbols in the click-callback)

Each symbol "scores" by calling the score function which increases the property of the same name in the _scores object.

Then I build a timeline, which shows the scoring. In this simple copdepen, it scales one of the div's shortly for basic scoring. Next there are multiple things being checked in my app, this I simplified to just a check if the score is greater than 2 in the codepen. If the score is greater than 2 it should rotate the div in question, which doesnt happen, because the tweens of the timeline in scoreTween() are build at a point in time, when the callbacks to score() haven't happend yet and thus the score is still 0.

What's really happening is a lot more. jquery Objects are created, classes changed to active and a lot more, also the conditions are a lot more diverse in my app. But if I can solve this problem of the codepen, I think I am good.

Sorry for not explaining my problem well.

-Jens

P.S.: I forked the codepen and changed it to the other approach I was mentioning briefly: 

This plays all animations at once, since the callbacks have all zero duration and so are inserted all at the beginning of the timeline.

Hi,

I am very new to webpack, so my suggestion might not be best practice.

I would suggest you install gsap as a npm module and add 

resolve: {
    modules: [
        'node_modules',
        path.resolve(__dirname, 'src')
    ]
}

to your webpack config. This way webpack can resolve your own stuff (located under ./src) and npm-modules.

This works fine for me and doesn't need anything else in webpack-config

Hope that helps,

-Jens

Hi Forum,

I need your help to tackle a problem. I want to build a timeline which depends on the state of my app. The thing is, that the timeline also changes the state of the app.

The linked codepen shows my problem. This is a very simplified version of it. It happens a lot more, but I think if I can solve this I can resolve the rest, too.

I already identified the Problem:

timeline.addCallback(score, null, [symbol]);

is called when the timline reaches the point, where this callback is inserted, but

timeline.add(scoreTween(symbol));

is created at the begin of the timeline (where all scores are 0)

I hope someone knows a better approach, as I am sure, this might not be the right way to do that.

If I add scoreTween as a callback i have the problem, that it tweens, but since callbacks have a zero duration all following timelines are inserted at the exact same place.

I understand why all this is happening, but I can't find a workaround, that works.

Hope you can help me out,

-Jens

See the Pen MobNgm by nahilep (@nahilep) on CodePen

Thanks a lot for your answer,

I already had a function in place which returns a tween, but it used a cached tween if the tween already existed. With your hint it was easy to resolve this by just returning a newly created tween every time.

Hello all,

I am having a tiny problem with a tween in a timeline which after it stopped shoud repeat after some other tweens are done.
 

The codepen I created illustrates the problem.

What I want:
1. red box animates and stops
2. blue box animates and stops
3. red box reruns and stops

What I get:
1. ----

2. blue box animates and stops
3. red box reruns and stops

See the Pen oZKEyg by anon (@anon) on CodePen