Leaderboard

You can do a FLIP animation.

Hi Jack. Thanks again for getting back to me. So after days of trying out different ways of firing my event listeners and reading various posts all over the web I finally figured out the problem. As it turns out, it had nothing to do with Greensock or the scrollTo plugin. Good news! The issue is specifically an iOS Safari issue on iPhone X. Perhaps known by some (not by me) the issue was the location of where I had my button placed. It was in the lower corner of the viewport so that when it was ‘clicked’ the iPhone’s action bar (only in Safari) interfered with my handler function. The solution is frustratingly simple. Move the button from the bottom of the viewport, make sure to have { autoKill:false } set and everything should work as expected. At least it did in my case. From what I’ve read, place buttons that have functionality associated with them above the lower 10% of the viewport and one shouldn’t encounter any glitches. As I said, seemed to only happen with iPhones X. There are other workarounds that people have written about, but… This is simple. Hopefully, I’ve saved someone a few hours.

Hi @BBaysinger. I'm with @GreenSock in that a simplified Pen may shed some clarity on what you are looking to achieve. That said, reading between the lines, the FLIP principle that @OSUblake, recently mentioned seems like it may be what you're looking for: https://aerotwist.com/blog/flip-your-animations/ See his CodePen example here:

@OSUblake This is a great resource!

I don't know. Have you tried using a RenderTexture? That might give you a bigger object to pan around. Zooming might not look good because a texture is a bitmap, so it will get pixelated if you scale/zoom in. http://pixijs.download/release/docs/PIXI.RenderTexture.html https://pixijs.io/examples/#/basics/render-texture.js https://pixijs.io/examples/#/demos/render-texture-demo.js

Well, yes, from() tweens have immediateRender:true by default, so they would indeed set things right away even if you pass in a non-zero position. And is there any reason you're using a timeline rather than a simple TweenLite.from()? Seems unnecessary/unhelpful. So you're trying to record the current values at that very moment (when you create the animation), and also set them to something else immediately, right? And then you want it to be able to revert them later when playing forward? I'm still really struggling to see a practical use case. I've been doing this for 10+ years and I don't think something like this has ever come up. I suspect that if you explained the "why" behind what you're doing, we may be able to offer you a cleaner solution. Do you have a super simplistic example scenario, perhaps as a codepen that we can peek at? Again, the simpler the better.

Did you notice the other custom element property being used? var t = box._gsTransform; But GSAP put that one on there for me. Since _gsTransform is an object, you can pass around its reference in some pretty interesting ways. I have several ModifiersPlugin demos that use the _gsTransform object as a point to follow. The first leader being passed into the createLine function is the pointer object. All the other leaders are _gsTransform objects.

I don't have time at the moment to pull the whole project apart to see what's going on, but this sounds like maybe you just forgot to put a perspective on the container. Remember, browsers won't render the 3rd dimension of 3D effects without a perspective set (typically on the containing/parent element).

Correct. See my two responses here for why I create a variable in a loop, and why it's not a new object.

Blake, I am a bit confused by your usage of the _flip object. You are using three loops to set/change/update all that's necessary - So far, so good. However, I can't make sense of the fact that you are declaring a box variable during the first loop, where you assign a _flip property to it and then, during the third loop you access that same _flip property. Hang on, something just seem to have clicked here... Do tell me if this is what is happening: // First - record start position without transforms for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; // This is an assignment by reference, right? This does not create a new object or anything, it's just a shortcut. box.style.transform = "none"; var rect = box.getBoundingClientRect(); // Which means, the bellow... box._flip = { x: rect.left, y: rect.top }; // ... is the same as // boxes[i]._flip = { // x: rect.left, // y: rect.top // }; // So, you are asigning the _flip object to the DOM element referenced by boxes[i] as a new custom property. } //... // Last - add transforms back with new position, for (var i = 0; i < boxes.length; i++) { // Thus, when you create this variable, boxes[i] already has _flip as a custom property. var box = boxes[i]; var rect = box.getBoundingClientRect(); var t = box._gsTransform; box._flip.x = t.x + box._flip.x - rect.left; box._flip.y = t.y + box._flip.y - rect.top; } Damn! This is enlightening.

It looks like you are just using the traditional Penner Eases. GreenSock's eases create the same results in a more optimized fashion and don't use the typical t,b,c,d parameters. The power eases with the numbers just make it easier to understand which eases are stronger than others. They are each mapped to one of the traditional curves. Power1 = Quad Power 2 = Cubic Power3 = Quart Power4 = Quint To match your easeInOutQuad just use GSAP's Quad.easeInOut or Power1.easeInOut the results will be virtually identical. GSAP also has access to Circ an Sine and of course proprietary eases. Please see the full list. https://greensock.com/docs/Easing

Yup, the default ease is Power1.easeOut which makes objects slow down a bit as they come to their final resting position (as they would in real life). https://greensock.com/docs/TweenLite/static.defaultEase if you want another as the default just use: TweenLite.defaultEase = whateverEaseYouWant or in your tween you can do: var g_1 = TweenLite.to('#path', 0.5, { attr:{d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z')}, ease:Linear.easeNone });

Hi @andrewchar, It appears the scripts in your CodePen aren't linking up correctly. It works best to add the scripts by clicking the gear icon next to the JS section in your codepen. The effects you're looking for should be achievable with SM and GSAP.

Going to kick-off this years creative examples with a campaign I started last year and am still finishing this year! https://nfl-game-pass-banners.herokuapp.com/nfl-2018-high-impact-sku-fyt-generic-prototype/ https://nfl-game-pass-banners.herokuapp.com/nfl-2018-simple-sku-prototype/ https://nfl-game-pass-banners.herokuapp.com/nfl-2018-match-up-countdown-prototype/

Hi, About me: This is the first day I am trying JSAP. I know using jquery and doing animation. But not expert. I am trying to rotate an element 180 degree, it works perfect using css3 rotation, but using jsap-jquery plugin, it behaves weired. It works for 179 degree and 181 degree. Problem is in 360 degree rotation too - it stays there. The code I used $('.link2').click(function(){ $('.div2').animate({'transform':'rotate(-180deg)'},3000) }) I tried the tweenmax way too $('.link3').click(function(){ var sur = $('.div3'); TweenMax.to(sur, 1.5, {transform:'rotate(180deg)'}) }) again, it works when using other values is there any way to force the direction, so it rotates the way i want?

Hello zureshm, Welcome to GreenSock Forums! If you want greater control using transform rotate(). Then you can use the following in your tween instead of using the normal CSS transform function and rotate() properties. In GSAP you declare rotate with the following : rotation rotationX rotationY rotationZ Check out GreenSock's Rotation interactive example here. CSSPlugin is included with TweenMax. The following is taken from the CSSPlugin DOCs: directionalRotation: tweens rotation in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example, if the element's rotation is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use the "_short" suffix, it would travel 20 degrees in the clockwise direction instead. // Example: TweenMax.to(element, 2, {rotation:"-170_short"}); //or even use it on 3D rotations and use relative prefixes: TweenMax.to(element, 2, { rotation: "-170_short", rotationX: "-=30_cw", rotationY: "1.5rad_ccw" }); Notice that the value is in quotes, thus a string with a particular suffix indicating the direction ("_cw", "_ccw", or "_short"). You can also use the "+=" or "-=" prefix to indicate relative values. Directional rotation suffixes are supported in all rotational properties (rotation, rotationX, and rotationY); you don't need to use "directionalRotation" as the property name. There is a DirectionalRotationPlugin that you can use to animate objects that aren't DOM elements, but there's no need to load that plugin if you're just animating css-related properties with CSSPlugin because it has DirectionalRotationPlugin's capabilities baked-in.You can find more on working with CSS properties in the CSSPlugin DOCs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html Does that help? If not you can setup a codepen or jsfiddle example so we can see your code in context, in an editable environment to better help you! Thanks!