Leaderboard

That's because you are adding new tween into same timeline every time your mouse enters or leaves. And timeline waits for previous animation to finish before it starts playing next animation. Simpler way would be to use TweenMax or Timeline inside the event.

Interesting. It happens because 'named elements' (elements that have id or name) are added to document object as properties, that's why it works. But in general you should stick to writing string as '#light', it saves you from potential conflict issues where you might use variable with same name as id. If that's confusing you, using light works in most browsers but I will suggest to practice using '#light'. Here you can read more if you are interested.

It's not displaying because you've got opacity set to 0 in your CSS (so it's invisible). And you're trying to target an object named "light" in the tween instead of using selector text like "#light". Here's a fixed fork: Does that help?

Hello @opila, The CSS filter property, especially the filter drop-shadow can be a big resource hog. You could try and use the CSS box-shadow property, which is used for the very purpose of giving elements like <img>'s a drop shadow. box-shadow can also be a resource hogs but not as bad as CSS filter drop shadow which are still somewhat buggy in all browsers. But box-shadow is your best bet for a drop shadow effect on a box. The flickering can also be resolved by using various CSS transform supporting properties like transform -axis: preserve-3d, backface-visibility: hidden, and the use of the perspective property or the CSS transform: perspective function (transformPerspective). But glad you got it sorted.

That seems ok to me, I think looking more into how to raise events/callbacks on canvas will help you. For example if you raise event/callback when mouse enters certain grid and leaves, you can use a tween that will update the color value externally without getting called unnecessarily. @OSUblake has great experience with such things, but not sure when he will be online.

Ohk I found the issue, it is because your scroll function returns paused tween. It takes control over all the elements and because you are using from tweens inside timeline, it renders all elements to their end position and pauses itself, which overrides everything. If you remove paused: true from the timeline returned by scroll function, you will see what is happening. I tried to trigger scroll function when onload animation finishes but I don't know exactly what to suggest, a limited codepen demo would be a lot easier to understand visually. Following is the what I tried to quickly have something to test. Following is the video that explains what immediateRender is, it reminded me how I was super excited about using from tween everywhere just to later find out how it gets really tricky.

Hello Sahil, Aha, so thats why Rookie misstake i guess, thanks for clearing that up! Thank you again, have a nice day!

I didn't see any problem. Did you mean Linear.easeNone? Also, it looks like you've got a commented-out tween that animates the "top" using the default ease (Power1.easeOut), so maybe that's what's confusing you. "y" and "top" both affect the element's vertical position and you've got two different eases at play. See what I mean?

Yeah, the new Firefox is a bit of an odd beast performance-wise. It looks like certain things are optimized and others are totally NOT. Like when animating top/left/width/height, it's horribly slow compared to Chrome. But transforms are much better. Another oddity is that for some things, WAAPI significantly outperforms CSS transitions even though they're supposed to use the same mechanisms under the hood. I already talked to the Firefox folks a couple of weeks ago about the really bad top/left/width/height animation and they said they think it's a Firefox bug. And it's affects all other JS libraries too, of course - it's not a GSAP thing. Hopefully they'll fix things soon.