Leaderboard

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

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 });

Hehe. Yeah, your planet is wiggling because you're animating the width. If you rework it to use scale instead, it will be smooth.

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.

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

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?

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

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.

Thanks @OSUblake, blindingly obvious once it's pointed out, many thanks!

Thanks for the response Jack. It does help. I was more concerned with the timeline itself getting capped. Knowing it was just the GSDevTools helps immensely. I am sure people are using your work way beyond the original intent. So far it is everything I thought it would be.

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 and welcome to the GreenSock forums, Thanks for the demo. Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated. For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline. Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines. https://css-tricks.com/writing-smarter-animation-code/

What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. ? AdjustmentFilter ? CRTFilter ? GlitchFilter ? ReflectionFilter ? KawaseBlurFilter ? RadialBlurFilter ? MotionBlurFilter ? OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.

Hi, I re-found this library that was recently revamped and it appears to work in IE using intersect observer... demo: https://russellgoldenberg.github.io/scrollama/basic/ repo: https://github.com/russellgoldenberg/scrollama info: https://pudding.cool/process/introducing-scrollama/

Here you go.

Hi @huwllewellyn You wouldn't be banging on your head on the wall had you looked at the pinned SVG Gotchas! thread. Everything you need to know about getBBox is right here, including a helper function that does exactly what you want. Give me a minute, and I'll show you how to use it in your demo.

Hello @DD77 You could try and use a SVG displacement map (feTurbulence). Here is an example using it with GSAP Happy Tweening!

@axe-z I haven't played too much with React 16 and GSAP yet but it seems that it hasn't change that much. With that in mind this samples use React 15, Transition group 2.2.0 (latest is 2.2.1) and React Router 4.1.2 (latest 4.2.0) so they should come in handy in order to get you started. Simple component transition using GSAP https://codesandbox.io/s/yvYE9NNW Using React Router to animate the mounting and unmounting of the components: https://codesandbox.io/s/mQy3mMznn Happy Tweening!!

My advice, don't try and favor one format over the other. Use the right tool for the job. Learn SVG. It's very useful. So is canvas. And GSAP plays nicely with both. I see a lot of people wanting to only learn SVG because it's easier, but then end up trouble when up in trouble when they reach its performance limits, and have to eliminate some features or start completely over with canvas. Some things people don't realize about canvas... It's drawing commands are completely vector based. SVG is just some XML and a spec. The way SVG gets rendered in the browser is based mostly on how canvas works. That's why you'll find the same rendering glitches in both formats, like this one in Firefox and Safari. You can draw and hit test SVG Paths. And you can use CSS and SVG filters. But if you like filters, you should check out PixiJS. There's even a GSAP plugin for it. http://pixijs.github.io/pixi-filters/examples/ I'm not trying to make a case for canvas in this post. Just trying to show how canvas and SVG can compliment each other, so it's good to know both.

Don't see why not. GSAP can work without a browser. Just make sure you don't load the CSSPlugin or any plugins that use it. And you might have to roll your matrix for transforms. This makes no sense to me... https://facebook.github.io/react-native/docs/transforms.html#proptypes

jQuery doesn't have a swipe event. That's for jQuery mobile. There are other libraries that can recognize gestures like a swipe, but Chrome just changed how touch is handled, and most of them haven't been fixed yet. For reference, here's a good article showing how to use the new pointerEvents. https://developers.google.com/web/fundamentals/design-and-ui/input/touch/ Basic swipe detection isn't that hard. You could even use Draggable to handle most of it. I actually showed somebody how to do that using the same demo. https://greensock.com/forums/topic/15370-draggable-choose-choose-only-move-to-down/?p=66819 And here's an isolated demo showing swipe detection. http://codepen.io/osublake/pen/NdzWKw/ .

I'm not very familiar with React, but couldn't you just use a closure & variable like: var _reactObj = this; //this variable is the key Draggable.create(ReactDOM.findDOMNode(this), { type:"rotation", throwProps:true, onRelease: function() { //reference the variable here. console.log(_reactObj.props); } }); ?

quick question: Does anyone know how to access the react props inside a draggable create object. Draggable.create(ReactDOM.findDOMNode(this), { type:"rotation", throwProps:true, onRelease: function() { console.log(this.props) } }); i get here the Draggable object on this. What is the best way to get this React class its in, instead of the GSAP object?

@greensock / Jack - na no pro, just work in that space a lot. I'm also happy its not difficult to combine two of my fav libraries! Agree about the blogging - I have two project nearing launch - so possibly after those... Yeah, interesting regarding the wrapper - I'm just not sure it's needed at this stage. Happy for anyone to offer where a wrapper might be needed, and then I could look at putting something together. In the meantime, I think tutorials/samples probably serve to be more useful then extra middleman code (again happy for some to alter my point of view on that one - as maybe I am missing some use cases). I'm not on these forums often, but feel free to ping me (I've just switched on notifications) if there is a particular react/gsap combo question and I will do my best to answer (though again, not a pro ) Also, if people have any specific examples they want to see with react/gsap, let me know and I can try to put together some more examples (if not, I can try replicate some animations react-motion and velocity-react are doing, but give them the gsap magic instead).

I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time. I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it. Simple things to remember: Use ref instead of findDOMNode | In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all. source: https://facebook.github.io/react/docs/react-dom.html#finddomnode When using ref, prefer ref callback over the older (yet supported) string variation: | If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead. source: https://facebook.github.io/react/docs/refs-and-the-dom.html Key is key Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating. ReactTransitionGroup Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom. gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react. Happy to throw some codepens together if needed. *Edit* Super simple example, can provide more: http://codepen.io/cjke/pen/qqWJzv?editors=0010 Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React - think like a normal input component, pass value={value} in and onChange callback). During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything).