Leaderboard

Let's say you animate to "50vw", but you use my conversion function which basically turns that into something like "845" (or whatever px). Great, it'll run exactly as you'd expect...but then what if the user resizes their browser to be twice as wide? The element won't adjust dynamically because the value is px-based (no longer tied to the window's width). So if you need that functionality, it'd be as simple as: TweenMax.to(el, 1, {x:toPX("50vw"), onComplete:function() { el.style.transform = "translateX(50vw)"; }}); Or, if you've got other transforms in there that you want to keep, you could do this in the onComplete: TweenMax.set(el, {x:0}); el.style.transform = "translateX(50vw) " + el.style.transform; //results in "translateX(50vw) matrix(...)"

You're creating your timeline in your runAnimation() function each time you click. Create the timeline outside of that function and I think everything should behave as you expect. Happy tweening.

Short answer: sure, just animate a string on a proxy object and plug that in manually via an onUpdate to element.style.transform (basically exactly what @Visual-Q suggested). This will only work if the starting/ending strings have exactly the same quantity of numbers in the same spots. Long answer: no, this isn't feasible on the "real" transform. To illustrate why, it'd probably help most to just give you an example: How would you interpolate halfway between "rotate(45deg) translate(50vw, 20vh) scale(2)" and "translate(25px, 80px)"? And remember, the browser always reports the current (computed) transform state as a matrix() or matrix3d() which are px-based. So a to() tween must grab the current value, thus how would you interpolate between these two values?: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" and "rotate(30deg) translate(50vw, 20vh)"? What's exactly 20% between those two states? See the problem? Furthermore, even in your example with animating between two strings that match perfectly (only the numbers are different in the start/end values), what would GSAP report as _gsTransform.x, _gsTransform.y, etc. during the tween? What happens if you need a separate tween that starts halfway into that one, but affects "rotation" or "scale"? Hmmmm. Things get VERY complex quickly. You may think it's silly that GSAP doesn't just slap the string onto the transform but there's a ton that goes into the proper management of transforms that most people never even realize, especially because GSAP makes it "just work". The only thing that's not super-simple right now is the vw/vh stuff, but %-based things are handled by xPercent/yPercent special properties but maybe you could tap into CSS variables for that. Remember, GSAP can even animate CSS variables. https://greensock.com/css-variables

All you'd have to do is set your SVG overflow to visible. .logosAnimation { overflow: visible; } Happy tweening.

If you want to literally kill the tweens, one easy way would be to use the killTweensOf() method. https://greensock.com/docs/TweenLite/static.killTweensOf() You can just pass in the target(s) that you want to stop animating. Or you could keep an array of your tweens yourself and pause()/kill() each one. Or TweenMax has a pauseAll() method. https://greensock.com/docs/TweenMax/static.pauseAll() Lots of options. There are still more, but I don't want to overwhelm you

Hi @SimonDucak Animated handwriting is a bit tricky. I know the effect you're trying to achieve, but drawSVG only works with strokes - not fills. You have a couple options. The easiest would be to create a mask for the text and animate the stroke of the mask to reveal the filled path. The other option is to create an open path that looks like the actual font. I wrote a couple posts on CodePen about how to create a handwriting effect. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here's the demo I made as part of those posts. Hopefully that helps. Happy tweening.

I'm not sure why the circle doesn't line up. I didn't look too closely at your SVG, but maybe the paths are off by a couple pixels? Just guessing. This might be a case for a separate timeline for reverse as it seems like you need really fine detailed control and that's a fast animation. It can't hurt to give it a try for comparison. Happy tweening.

One of the fundamental benefits GSAP delivers is consistency in transforms' order-of-operation and being able to query those values at any given time. Like "what's the rotation right NOW?" (even if it's partway through an animation). Since CSS transforms can be chained infinitely and they're all shoved into one property, that's virtually impossible with raw CSS. Consequently, GSAP can't just pass through whatever string you feed into the transform. For example: "rotate(20deg) translate(50% 10%) scale(2) translateX(20px) skewX(10deg)" - what's the "x" in that exactly? Hm. All of those values ultimately get combined into a matrix() or matrix3d() by the browser anyway (which, by the way, are ALWAYS px-based). GSAP interprets that matrix data and populates the x/y/scaleX/scaleY/rotation/... accordingly. Again, this can be a huge convenience. But it also makes it tough to accommodate relative values like % and vw/vh. For %-based stuff, that's why GSAP offers xPercent and yPercent. There's currently no ideal solution for vw/vh but those are typically pretty easy to just convert on your own (see for a function that'll do it for you). //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); In order to work around browser issues like Firefox not reporting transforms correctly that weren't in a visible element, GSAP automatically applies string-based transforms to a proxy <div> internally but since your example uses values that are relative to the element's own width/height, it was failing (that proxy <div> had a width/height of 0). I applied a fix in the upcoming 1.20.5 release which you can preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js So that should solve the bug in Blakes reduced test case. If you need to apply string-based transforms that are vw/vh based, I'd recommend using the conversion function I mentioned above and then in an onComplete you could just element.style.transform = "your values" so that it remains responsive and doesn't get px-based. Does that help?

I tend to think that if you get it set up right the way GSAP handles transforms shouldn't present a problem. That's only a guess though, since I have no idea what the original bug is. If transforms are causing you difficulties though what about adjusting your css and positioning your object absolutely and animating top, left values instead of transforms. If they animated as percentage values they would be relative to the parent and responsive.

That sounds like what we've been seeing in Edge and its sudden fussiness with masks. I guess a slight rotation to mask animations is just a new fact of life. Browsers sure are fun.

This has nothing to do with GSAP - it's a rendering issue with Safari. GSAP is setting all the values properly, but Safari is ignoring the updates and basically not drawing the revised graphics to the screen. To force Safari to redraw things properly, you can change the transform of the affected (masked) elements. It's like Safari says "oh, okay, something significant changed about this thing, so let me rasterize it again and redraw the pixels". In this case, it's the <g> elements. Even if you literally change x (or y or rotation or whatever) by 0.01, it'll trigger it. Here's a fork: Does that help?

We're glad to see you got it figured out @Juno911. Thanks for letting us know and thank you for joining Club GreenSock. Happy tweening.

I nailed it by the usage of onDrag and onDragEnd! This case can be closed. Thanks anyway

HI @Hugh Nivers Welcome to the forum. In addition to @Carl's excellent advice, I'll throw out a bit of info for you. There is some crossover between CSS properties and SVG attributes. These two lines will produce very different results in your SVG: TweenLite.to("#logo", 1, { x:600 }); TweenLite.to("#logo", 1, { attr:{x:600} }); If you're after those SVG attributes, you'd want to wrap them like above and use the attribute plugin (which is automatically included with TweenMax). You mentioned clicking the button to tween the wheel so I added that to my fork for you. Hopefully that gets you started. Happy tweening and welcome aboard.

Agreed, I'm just going with the later, if it works I'm all for it, also I just put in my stats and its at a silky smooth 60FPS!!.

Oh, feel free to use a png. I didn't mean to imply that you shouldn't. I just used a Pixi graphic because I didn't have a little white circle .png available. I've used textures from primitive graphics and .pngs in my Pixi work. Both seem fine, but I don't get too deep into the weeds about what's better. I usually just use my eyes, watch the GPU percentage and FPS meter. If that all seems okay, I just go with it. Happy tweening.

Thanks for the demo. That helps a lot. Everything is working. You're just starting with a green .png. If you want to tint and get the actual color, it's best to start with a white particle. In this case you're just using a circle so there's no need for a .png as Pixi can draw a circle for you. Here's a fork of your pen with everything working. Happy tweening.

As I mentioned, troubleshooting is extremely difficult without a demo. My advice would be to get a simple version of your project working on CodePen. You just said it doesn't work, but didn't say why. Once you have something we can see and edit, you'll get better answers. Here's another particle container with scale and alpha working correctly. You can fork this and add your own assets if you need additional assistance. Thanks.

Hi and welcome to the GreenSock forums, Thanks for the demo. The problem is that svg elements do not honor css positioning like top and left. You can however animate the transform value, which in this case would be "x"

I can't really dig through your entire script, but what I do see is you're targeting the children of the particle container with your alpha tweens. If you're going to do that, you have to set tint:true (or alpha:true)in the properties object of the particle container. http://pixijs.download/dev/docs/PIXI.particles.ParticleContainer.html

Looks to me like the alpha of the particles is set to 0 when you create them so they wouldn't show up.

o.k. - i grabbed another iPad from someone else. This is a 3 and it's running iOS 10.3.3. The animation does not work on that one. My iPad 2 running iOS 9.3.3 is playing the animation. The old clunker with an outdated operating system works fine. Weird.

When you create a timeline and tell it to reverse before its been played, it has no place to go. Your demo would have worked if you reversed from the end of the timeline like this: tl.reverse(0); But even that would have started getting messed up quickly with tween overwrites and everything would have been out of position. It's always better to create the timeline once and then control it in your functions and event handlers. Happy tweening.

I have an older iPad 2 for testing and it played on that for me. I wish I could test more for you.

I just tested on my iPad. Everything looks fine to me in Safari and Chrome. I don't have a Mac so I can't test desktop versions of those browsers on iOS, but maybe someone else can check for you.

Your pen is loading the Morph plugin, but you're not converting the circles to paths. It doesn't do it automatically. You'd need to add this code: MorphSVGPlugin.convertToPath("circle"); Happy tweening.

Hi @ceindeg I can't test on iOS to see what you're seeing, but my guess would be that it's being fussy with drawing circles in the mask. One thing to try would be converting those circles to paths. You can do that in your vector software or the MorphSVG plugin has a convert to path method. https://greensock.com/docs/Plugins/MorphSVGPlugin Circles present some strange issues from time to time. We have a big circles thread that may also have some useful info for you. Hopefully that helps. Happy tweening.

I tried sending the "full page" view of your demo to my phone and got this warning: http://prntscr.com/jcdsx1 I think you should try testing the demo on your phone in "full page" or "debug" mode. The codepen editor sometimes causes problems on mobile. If the problem still persists, please try to reduce your demo to single tween on a single shape. It will be much easier for us to help you.

Pretty sweet and simple viewport units to pixel conversion function Jack ( @GreenSock )

Thanks for the suggestion, @kreativzirkel. We'll look into how difficult that might be to include in the offline docs.

I was incorrect. You can tint the particle container. Here's a working particle container being tinted. The other thing about a particle container is all the sprites have to be from the same base texture. Without seeing your setup, we'd just be guessing about what might be wrong. I'm not sure why you'd have to FTP to CodePen. All we need is a basic example of what you're doing and what isn't working. It does not have to be your complete project or actual assets. Just something simple like I have above. You can even fork my demo and go from there. Without a demo, it's really hard to troubleshoot. Thanks.

Did you set the tint boolean to true in the particle container properties? (it's false by default) http://pixijs.download/dev/docs/PIXI.particles.ParticleContainer.html If you could make a demo so we can see what you're doing that would be great. More info:

If you want them all to do the same thing, you can target the children like this: .to(particleContainer.children, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut } If you want to do something different with each one, you'd loop through and create individual tweens/timelines for them. Hopefully that helps. Happy tweening.

Hi @Abel Welcome to the forum. A container is just a collection of objects. You'd need a graphic or sprite in there to tint it. Are you trying to tint the background of the container or all the particles in it? You can do something like this: var bg = new PIXI.Sprite(PIXI.Texture.WHITE); // add to your container bg.width = 1000; // your canvas width; bg.height = 600; // your canvas height; // then tint the bg sprite Happy tweening.

Hm, how about if roundProps could accept an object and for each property, you define a number that's the smallest gap, like: roundProps: { x: 0.1, //round to the closest tenth (0, 0.1, 0.2, 0.3, etc.) y: 5, //round to the closest 5 (0, 5, 10, 15, etc.) rotation: 45 //round to the closest 45 (0, 45, 90, 135, etc.) } Do you think that's intuitive? Here's an updated TweenMax with this functionality embedded (note: it required some tweaks to CSSPlugin too, so this wouldn't be backwards compatible for CSS properties): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Is that the kind of thing you're looking for? Does it work well for you?

Yes, you can add an ease to the vars object of those methods. Something like this: tl.tweenTo("reverseStop", {ease:Power4.easeOut}); When you tween a timeline like this, you're creating a linear tween that scrubs the playhead to/from times/labels. You can add in/out eases to this tween in the vars. Sometimes it's preferable to remove the eases from the actual tweens on the timeline and make them all Linear.easeNone. You then set the eases in the scrubbing tween like I did above. Hopefully that helps. Happy tweening.

Yep, I'd do exactly what @MindGamer recommended. Simple example: function random(min, max) { return min + Math.random() * (max - min); } function gotoRandomPlace() { //notice the onComplete points back to this same function, so it'll keep going to random coordinates TweenMax.to(...{x:random(-100, 100), y:random(-100, 100), onComplete:gotoRandomPlace}); } gotoRandomPlace(); As for vw/vh units, those aren't supported on transforms because to maximize performance, GSAP bakes everything into matrix() or matrix3d() values which are always px-based (although it does support percentage-based values as well by prepending a translate() or translate3d()). You should be able to relatively easily convert vw/vh on your own, though, like: //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); The only caveat is that since the end result is in px, things won't shift if the window gets resized AFTER the tween finishes. But you could certainly use an onComplete to set those units directly, like element.style.transform = "translate(50vw, 20vh)"; if that's essential for your context. Does that help?

Hi @mercy In that demo, there is an element that is blocking the pointer events. It just needs to be positioned differently. You could also try setting the body height like I do here.

Hi @mikel By scroll jacking, I'm talking about interrupting or changing the native scroll bar behavior. Much like this demo screws with your mouse. I'm not against scrolling animations or parallaxing. Quite the opposite. I actually do a lot of that stuff... but with my own scroll magic. Look at the demo Jonathan posted above. There's actually no content being scrolled, yet the scroll bar behaves normally, even with touch. If you need to do scroll jacking, just hide the scroll bar. You can get the effect you want, but without messing with user expectations. That's what a lot of the apps on GSAP's and Pixi's showcase pages do, most of which have won some type of award. A couple of the first ones I came across. Some really nice stuff! https://www.rainforestfoods.com/experience/#!/slide-intro http://jetlag.photos/ http://truthlabs.com https://moments.epic.net http://masterdigitaldesign.com/#the-master