Leaderboard

The second seconds suggestion works perfectly, I also relied on Thanks OSUblake

Hi @BeckBeach A mesh is like the geometry and the appearance/surface of something. Image an image. Now divide that image up into a grid. Each grid cell is split into two triangles. That's essentially what a mesh is. Animating a 2d mesh with PixiJS. The vertices are the corners of the grid cells, which are represented by the red dots. The vertices are stored inside a single array, which isn't a convenient object to animate, so I map the vertices to point objects. I then animate the point objects with GSAP, and then on every animation frame, map the point object values back to the vertices array. That might be easier to do with three.js, but the concept is still the same. You can animate the points (vectors) of a mesh. Check out this demo. It's not using GSAP, but it's the same effect you're asking about. This is what the burger looks like. They are using canvas to convert that image into a mesh. They loop through the image data, getting the rgba value of a pixel at a certain interval, and use those values to set the color and xyz value of a vector. To learn more about image data, check out this tutorial... https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas And this post... https://codepen.io/rachsmith/post/getting-getimagedata

Hi @kbeats You're targeting the whole SVG, but the morph plugin works path to path. You'll need to target the polylines in the SVG. Happy tweening.

Hi @jp_uk81 Welcome to the forum and thanks for being a member of Club GreenSock. Since you want the gradient based on user scroll, I think in this case it will be better to create a second scene that animates only the gradient. Then you can focus on each section animation and whatever happens on those timelines without worrying about adding the gradient tween to them. I think something like this should work. If you were using the actual tween duration for the gradient change, then I'd say trigger it at each section. Hopefully that helps. Or at least points you in the right direction. Happy tweening and welcome aboard.

There is ONE ticker, and it controls everything: TweenLite/Max and TimelineLite/Max. You access it through TweenLite. https://greensock.com/docs/TweenLite/static.ticker

Here's a fun little entrance. I'm scaling everything from the same point. You need to open it on Codepen to see the full effect.

You can draw an emoji on a canvas, which means you can get image data for it.

Thank you! SVG code is still SO confusing to me!

It makes so much sense now. Thank you PointC!

Ok. Sorta figured it out...or at least found a solution. Looks like my build environment got corrupted or buggy somehow. I was installing packages via `npm install` and it would fail, however if I used `yarn install` it works. Not at all sure why this is happening, but my gulp compiled JS is different after installing from npm vs yarn. ?

Hi @Norixxx If I understand your desired result correctly, I'd probably go with an onComplete call when that 2nd element completes its fade-in on the main timeline. Maybe something like this: Does that help? Happy tweening.

And the first suggestion also works, as the younger brothers of TweenLite inherit everything

And it might be better to use an event listener to change that, like page visibility. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API Or maybe blur and focus.

That's the answer. Try it.

Yeah, will-change can fix some problems, but it might create a bunch of new problems that you weren't expecting. That's why I said you have to be careful with it. I'm thinking that you could probably simulate brightness. Create a version of your sprites that are all black, or some dark color. Overlay those dark sprites on top of your regular sprites, and animate the opacity to simulate brightness.

Good point, @PointC @jesper.landberg, if you are truly using DrawSVGPlugin to animate a <path> that has non-scaling-stroke and isn't proportionally scaled, that's a problem and the console.log() calls are valid. It won't break anything outright, of course - it's just a warning. The measurements won't be correct due to browser issues that we can't fix. And there's no way to disable it (other than to fix the problem with your non-proportionally-scaled element). If you're still having trouble, please provide a reduced test case in codepen and we'd be happy to take a peek. Thanks for being a member!

Is that the latest version? (0.2.0 / 2018-08-27) I ask because @GreenSock made some updates to that plugin based on info in this thread about non-scaling-stroke. If you're using that latest version and still getting that error, this is above my pay-grade. We'll have to kick it to upper management. Happy tweening.

I've read this through a few times and I'm confused as to the desired behavior. It seems like you have a logo timeline with mouseenter/leave to play/reverse? You also have a banner timeline which should operate independently of the master with a button click? From what I'm reading/understanding, I'm not sure a master timeline is the right choice here since it sounds like each part needs to do its own thing. It may be that I'm missing something though. Can you explain really simply what you want the orange box to do and what you want the green box to do? The way you have those mouseenter/leave events written right now is calling the logoRollover() function and recreating the timeline each time. That's not ideal. You'll usually want to create a timeline once and then play/reverse it on click/hover. Thanks.

Just keep learning and practicing. Eventually things just start 'clicking' and that's when it gets really fun.

Happy to help. FWIW you can also shorten this down to a couple stagger tweens which would make adjustments much easier. Happy tweening.

Hey @smallio We haven't seen you in a few weeks. Coincidentally, I just made a demo for another thread that does what you need here. (I think it's what you need anyway). https://codepen.io/PointC/pen/rZZGRj Does that help or am I misunderstanding the desired outcome here? Happy tweening.