Leaderboard

BTW you can mimick those dev tools features just from console. Pause from debugger and it will pause ongoing animations. or enter TweenMax.pauseAll() in console and it will pause all ongoing tweens/delayed calls. TweenMax.resumeAll() to resume everything. TweenMax.globalTimeScale(0.5) to slow down everything that GSAP does and TweenMax.globalTimeScale(5) to speed up.

Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing. https://greensock.com/gsdevtools

If you Fork that pen, you then have a pen that loads all the premium plugins. You would just need to add your own code at the point. Another option is you can create a new Pen from scratch and load the tools you need with the urls of the scripts you need. Here is a pen you can fork that loads MorphSVG and TweenMax Run Pen Edit on CodePen Fork Add your own code Save Paste link in reply

Thanks a lot @mikel, i guess i might have overcomplicated things , i managed to get it working. I basically wanted to avoid doubling the code for the touch events, anyways it works so far. Thanks a again for the help const who = { trigger: [...document.getElementsByClassName('slide')], init: () => { console.log('init'); who.trigger.forEach.call(who.trigger, (el) => { el.addEventListener('mouseover', who.animateOver, false); el.addEventListener('touchstart', who.animateOver, false); }); who.trigger.forEach.call(who.trigger, (el) => { el.addEventListener('mouseout', who.animateOut, false); el.addEventListener('touchend', who.animateOut, false); }); }, animateOver() { const image = this.getElementsByClassName('image'); const heading = this.getElementsByClassName('text1'); const subheading = this.getElementsByClassName('text2'); // animate image TweenMax.to(image, 0.25, { yPercent: 35, ease: Power1.easeOut, }); // animate heading TweenMax.to(heading, 0.75, { yPercent: -180, ease: Power1.easeOut, }); // animate subheading TweenMax.to(subheading, 0.75, { yPercent: -90, ease: Power1.easeOut, }); }, animateOut() { const image = this.getElementsByClassName('image'); const heading = this.getElementsByClassName('text1'); const subheading = this.getElementsByClassName('text2'); // animate image TweenMax.to(image, 0.75, { yPercent: 0, ease: Bounce.easeOut, }); // animate heading TweenMax.to(heading, 0.75, { yPercent: 0, ease: Bounce.easeOut, }); // animate subheading TweenMax.to(subheading, 0.75, { yPercent: 0, ease: Bounce.easeOut, }); }, }; who.init();

Thanks for the reply. Actually this looks pretty straight forward with three.js and low overhead so great tip thanks! Buzz

I'll withdraw the question, but wanted to post the solution in case someone else runs into the same issue. I was able to use the forum to find a solution I could get to work.

I just posted my first question. Then I was browsing the forum and saw your post. I hope to be writing a post like this in 12 months. Awesome, Inspiring & Motivational. Thanks!

There is no width here. var anchoMenu = -elMenu.width(); $("li").css("transform", "matrix(1, 0, 0, 1," + anchoMenu + ", 0"); And it would be better to let GSAP handle setting the transform if you're going to animate it. elMenu.css("width", "100%"); var anchoMenu = -elMenu.width(); elMenu.css("width", 0); TweenLite.set(lineas, { x: anchoMenu });

Hi @cfx GSAP is an animation engine, and does not handle rendering. You could certainly use GSAP to animate the particles in that demo, but you would still need to write all the code to handle the creation and rendering of the particles. In short, the hardest part of that demo is the rendering, and there is no easy way to do something like that. The amount of code would probably be the same if GSAP was used to handle the animations. The biggest problem I see with that demo is that it's using a 2d canvas to do 3d rendering. It's doable, but far from optimized. It would be much easier, and faster to create something like that using three.js. Once you have something that can be rendered in three.js, it's very easy to animate it using GSAP. https://threejs.org/ https://github.com/mrdoob/three.js

Brilliant! Thank you for two extremely useful answers. I feel a bit duhh for not starting from the possibility that GSAP had its own debug tools already, but such is life...

Hi @hendrikeng, I prefer this way ... Happy tweening Mikel

Hummmm. I've got no idea what game is this that you are refering to. I do have a vague impression of what you are trying to achieve. From what you are describing, nothing springs to mind as a way to update the perspective-origin in this scenario. However, what does spring to mind is the question: Are you using the right tool for the job? Would you not benefit from a different setup? Or even a different technique? If you are going to recreate a game and want to use 3D perspective, would you not be better off with a library that's designed for that? You could try having your '#tableContainer' not moving, that would stop you having to change the perspective-origin but that would mean you having now to translate all the children inside it. So, maybe a 3D specialist library?

Hello @krs! Well, I wouldn't claim that as being 'pure css' as you're toggling the classes with jQuery. There are dozens of ways to animating all divs when one is clicked. You could target a specific class they all share, target all divs that are children of another, or any other way you could think of. But taking the example you have given on the previous post, I've made the following, see if that helps:

Thanks all for your answers. A smoothOrigin property as Sahil mentioned it seems it would be convenient to use. I would be using OSUblake's answer. Thanks.

Thanks a lot @mikel that really helped! If anyone needs the jQuery free version of mikels pen : TweenLite.set(".page", { autoAlpha: 1, xPercent: -100 }); const page = document.querySelectorAll(".page"); const button = document.querySelectorAll(".button"); button.forEach.call(button, function(el) { el.addEventListener("mouseover", function(e) { let thisPage = this.getAttribute("id"); TweenMax.to(page, 0.2, { xPercent: -100, ease: Sine.easeInOut, onComplete: newImage }); function newImage() { TweenMax.to(thisPage, 0.8, { delay: 0.4, xPercent: 0, ease: Sine.easeInOut }); } }); }); button.forEach.call(button, function(el) { el.addEventListener("mouseout", function(e) { let thisPage = this.getAttribute("id"); console.log(thisPage); TweenMax.to(page, 0.4, { xPercent: -100, ease: Power2.easeIn }); }); }); thanks again

Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.

Wowww, Thank you very much! Perfect!

It's hard to say without knowing what you're doing, but figuring out the actual offset might be better than messing with the transformOrigin.

You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test. To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

Ya like I said you can maintain a variable with reference to those tweens, so if cube is animating then you can ignore the clicks until animation finishes. Another option is to increase the timescale of ongoing animation and once it completes only then begin new animation, users will hardly notice this. And sorry I am not really feeling well, I was just excited to do it so gave it a try. All the best.

Here is similar thread that suggests to animate transformOrign by using onUpdate callback. See if that helps. @GreenSock any plans to bring smoothOrigin to html?

3D cube was one of the first thing that I did as experiment with GSAP. Following is the demo I created by modifying @OSUblake's demo in this thread. You may want to refactor some of the code. Everything is perfect except if you click too quickly the cube behaves like animating cards but you can avoid that by maintaining reference to tween and use it to ignore clicks if cube is animating.

Hi @hendrikeng, surely this pen gives you some suggestions. $ (this) is part of the solution ... Happy tweening ... Mikel

Hi @salas.jsm, Welcome to GreenSock Forum. Please take a look at these explanations: https://greensock.com/position-parameter The positioning of a tween can be selected with several options. Here 2 sec after the end of the last tween: If this does not lead to the desired solution, please let us know. Happy tweening ... Mikel

Here's how to make a really simple camera. Just move the world in the opposite direction your target is moving. To keep the target centered in the view, the path should be at least 1/2 a screen away from the edge of the world. I didn't do that in this demo, and you'll notice when the bee gets close to the edge of world because it has to move away from the center of the screen.

Hi @Plenge, Welcome to GreenSock Forum. Here just a quick and dirty what I think you want to execute (?) ... Happy tweening Mikel

To use PixiJS with Animate CC, you would need to use the Pixi Animate runtime. It's written by one the main PixiJS devs. https://exchange.adobe.com/addons/products/14345#.Wi8GHiNX2Ul https://github.com/jiborobot/pixi-animate The problem with blurring on a regular canvas is that it's slow. Blurring with PixiJS is fast because it uses WebGL. However, in the future you will be able to use CSS and SVG filters directly inside a canvas context, which should run pretty fast. At the moment, it seems support is limited to Chrome and Firefox. You can see a CSS blur filter at work here. Turn off the contrast filter in the settings panel to isolate it.

Hi, The thing is that the `onComplete` callback is being used to mount/unmount the component from the App and the DOM. He's using React Transition Group, which is heavily inspired from Angular's ng-animate (at least the old version of ng-animate when you had to pass a callback to onComplete in order to keep track of things), and honestly my personal opinion is that for a simple mount/unmount toggle He's over-complicating things, because I don't think is absolutely necessary to use the component's lifecycle methods in the animations, react transition group does that for you, but everyone has it's own ways so if it's working for Him, that's great!!. Here are two samples of using GSAP with React and Transition Group. This is a simple component toggle, the component gets animated and when the out animation is complete it's unmounted, when the in animation starts is mounted: https://codesandbox.io/s/yvYE9NNW As you can see the `<Transition>` element is just a high order component that adds some features to the regular component using the `addEndListener` attribute. This sample is a todo list using the same set up. Never mind the code that's commented out, I keep that in case someone needs to use... [sigh] CSS transitions (sorry for using the forbidden language in the forums :D): https://codesandbox.io/s/7Lp1Q8WBA Hope this helps. Happy Tweening!!!