Leaderboard

Hello, Do you have an actual code example link with this happening, since its not happening in codepen? Usually the same type of bug would show up in desktop chrome that happens on android mobile chrome. That is one good thing the chrome devs have implemented, making the same rendering at least for desktop PC chrome and mobile chrome on android. The fact it doesnt happen in codepen shows there is an issue with your original code somewhere. Also when you see this flicker do you know if the element is animating using matrix3d() or just matrix() for the transform property inline on the element? I believe it is only matrix() like your codepen above. As a rule of thumb anytime you animate x (translateX) or y (translateY) especially in Firefox desktop or mobile versions. Its best to add a slight rotation: 0.01 to prevent a firefox translation bug that could cause jank or flicker flack. That forces firefox to use matrix3d() so the element is placed on their own rendering layer for a smoother animation. Along with making sure it uses transform matrix3d().. also sometimes adding backface-visibility:hidden on the problem element being transformed can help with this flicker. But if you cant provide an example where this happens i would just opt for @Carl's solution animating the height of the div.

There isn't an easy way to have that level of fine-tuned control. Technically a CustomEase would allow you to create a separate rotation tween with its own ease. I created this crude demo below in more time than I'd like to admit: Its far from perfect but you should be able to see the "guy" speeds up as he falls down the hill and leans back. It required a substantial amount of back and forth between the Ease Visualizer and the demo. The ease I'm using for the rotation looks like https://greensock.com/ease-visualizer?CustomEase="M0,0 C0,0 0.114,-0.044 0.204,-0.044 0.334,-0.044 0.324,0.78 0.448,0.78 0.586,0.78 0.655,0.139 0.708,0.068 0.846,-0.118 1,0 1,0" It relies on MorphSVG.pathDataToBezier() (Shockingly+) to have the guy follow the path. So that's how it could be done by hand. Then there is the programatic approach... What you want to is entirely possible if you live in the Matrix like @OSUblake Check his demo where he adjusts the speed of an object based on the steepness/direction of the curve it is following. It doesn't seem like much of a leap to have the rotation of an object adjust based on similar factors. Definitely not something I could whip together though.

@Carl show off.

In case you need a whole list of them: var plugins = com.greensock.plugins; Object.getOwnPropertyNames(plugins).forEach( function (val, idx) { $("<li>" + val + "</li>").appendTo("ul"); } ); var eases = com.greensock.easing; Object.getOwnPropertyNames(eases).forEach( function (val, idx) { $("<li>" + val + "</li>").appendTo("ul"); } );

What happens if you set explicitly touch-action: manipulate which prevents the 300ms click delay on mobile, since touch-action: manipulate tells the browser your intent, and then it doesn't have to have that mobile 300ms click delay. That is one reason why Chrome devs added support for touch-action: manipulate. You might need to use the !important declaration for touch-action: manipulate to override the inline style of touch-action: pan-y currently being added inline. Mozilla added touch-action property support for the new pointer-events spec like 5 days ago. Not sure if that was pushed to Mozilla Firefox Mobile Browser app. Does that help in any way either by adding touch-action: manipulate or even trying touch-action: none to see how it is affected?

Sorry, not really familiar with the browser issues with clip-path. Last I checked IE / Edge didn't support it. My assumption is that Chrome is just struggling somehow with the rendering. Have you considered just animating the height of .div? seems to work well and gives the same effect:

You can use Draggable to generate any number and apply it to anything. See this demo where Draggable is used to control the progress of a tween that scrolls a div: If you can provide a small demo that has some audio playing with volume controls perhaps we will have a better suggestion of how to implement it.

I stripped a bunch out of that demo and took a different approach. I created a paused tween that scrolls the content div to its maxScroll position like so: var scrollTween = TweenMax.to(content, 5, {scrollTo:maxScroll, paused:true}); I then used the onDrag property of the knob's Draggable to update the progress of that tween: Draggable.create(knob, { type:"rotation", bounds:{minRotation:0, maxRotation:360}, onDrag: function() { //use current rotation (a value between 0 and 360) to generate a value between 0 and 1 to pass to the progress of the scrollTween var progress = normalize(this.rotation, 0, 360); console.log("progress = ", progress); scrollTween.progress(progress); } }); //returns a value between 0 and 1 //normalize(180, 0, 360) // returns 0.5 function normalize(value, min, max) { return (value - min) / (max - min); } ***note: that demo loads GSAP's ScrollToPlugin from: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/ScrollToPlugin.min.js If you need a great study on scroll positions, normalize and clamp check out @OSUblake demos here: https://greensock.com/forums/topic/16514-continuously-tween-on-click-taphold/?do=findComment&comment=73118

I really wasn't interested in what that function does. I would recommend starting over with your own code so you know how everything works. You don't rotate each individual div. You rotate the outer div. As an item reaches the top, you change it's z-index. Here are some demos that might help you get started. They don't change the z-index, but it would be done in a onDrag callback for the draggable instance.

A timeline would be best. So you could do something like this, and they will play sequentially. var tl = new TimelineMax() .to(polyline, 1, { attr: { points: pointsForKF1 }}) .to(polyline, 1, { attr: { points: pointsForKF2 }}) .to(polyline, 1, { attr: { points: pointsForKF3 }}) If you need help, try putting what you have in demo.

About the parentheses comment in your code, they can be omitted if you're not passing anything in to the constructor. // valid, but looks odd to me var tl = new TimelineMax; And using bind on a object like I showed you could be done differently. If you need multiple instances of something, make a factory function, a function that will return an instance for you. About the staggerTween. Try logging out the target. You're using jQuery, so the target is going to be a jQuery object. So using the target in your update function is the same as doing this. You're updating every element inside that jQuery object at the same time. TweenMax.set([element1, element2, element3, element4], { ... }) Where did the customColor go? GSAP knows you're targeting an element, so it's going to tween the customColor as a CSS property. It's not a valid CSS property, so you won't see inline, but it will be on the element's style object. For a non-stagger tween, this would work. It will put the customColor on the actual element. TweenMax.fromTo(".box", 1, { autoCSS: false, colorProps: { customColor: "green" } }, { autoCSS: false, colorProps: { customColor: "red" }, onUpdate: function() { TweenMax.set(this.target, { backgroundColor: this.target[0].customColor }); } }) Overkill? Since you like experimenting, try playing around with using getters / setters. Did you see this post I made? And check out these articles... http://lea.verou.me/2015/04/idea-extending-native-dom-prototypes-without-collisions/ https://www.sellarafaeli.com/blog/native_javascript_data_binding What going on here? Object.defineProperty(HTMLElement.prototype, "reneClipPath", { get: function() { return this._reneClipPath; }, set: function(value) { this._reneClipPath = value; this.style.clipPath = value; }, configurable: true });

Hi @neeh Welcome to the forum. If you'd like to infinitely repeat a timeline, but have a pause between repeats, you just need to add a repeatDelay. Like this: var tl = new TimelineMax({ repeat: -1, repeatDelay: 1 }) Hopefully that helps. Happy tweening.

That's pretty good @Carl You could also play around with adding the rotation to your Bezier values. Beziers aren't limited to x and y values. TweenMax.to(element, 2, { bezier: { values: [ { x: 100, y: 10, rotation: 0 }, { x: 200, y: 20, rotation: -30 }, { x: 200, y: 30, rotation: 30 }, ... ] } });

It works fine for me in iOS. I poked around some more and it looks like those browsers on Android make it pretty much impossible to solve because: The long-touch triggers a "touchcancel" event (which in turn causes Draggable to call onRelease, as it should). That's likely because the long-touch triggers a contextMenu, but of course you don't want that which is why Draggable intercepts that event and calls preventDefault() and stopPropagation() in that case. This should, in theory, prevent that touchcancel from ever occuring...but in the browsers you mentioned on Android, that doesn't seem to be the case. It fires it anyway. Once the "touchcancel" event is fired, it basically kills the interaction and "touchmove" events aren't fired anymore (until you touch again, of course). That's why Draggable calls the onRelease. It SHOULD. We can't just have Draggable ignore the "touchcancel" because it'd act like the press is stuck. Moving your finger wouldn't drag because the browser is now refusing to fire touchmove events. The only way to circumvent all this is to call preventDefault() on the original touchstart event, but if you do that, it will refuse to allow any touch-scrolling. This is why setting allowNativeTouchScrolling:false fixed the issue - it allows Draggable to call preventDefault() on that touchstart event. But you said you want to keep native touch-scrolling. On Android devices, Draggable must wait for the first movement to discern the user's intention and either preventDefault() or not on the event. So it's quite a conundrum. Due to odd behavior on Android browsers, as far as I can tell it's logically impossible to get all the behavior you're asking for. It doesn't even work to set touch-callout and user-select to none (which typically would prevent any context menu). No matter what, that touchcancel event is triggered. Unless I'm missing something. Please let me know if you (or anyone else) can figure out a solution.

Hi , I love the sounds of the sea, the seagulls and their screaming: Question: Can I combine morphSVG with cycle? .staggerTo(birds,0.8, { cycle:{morphSVG:["#bird1fly","#bird2fly","#bird3fly",]}, repeat:-1, yoyo:true, ease: Sine.easeOut},0.3) Kind regards Mikel

You're welcome. The video slider page looks good - it's nice to see the final result of a forum question. Thanks for sharing. Happy tweening.

Back in the days, wise master Blake showed me a great trick, when I was fighting with a gradient tween (or was it clip-path?) He just made an object containing a value to be tweened + a function that was called onUpdate of said tween. This function then worked with the value that is currently being tweened. Brilliant! This was when the Matrix flickered right before my eye– for a tiny moment; long enough to hammer the last nail into CSS and jQuery animations coffin. It looked somewhat like this: var generic = { elem: ".box", x: 0, update: function() { var percent = this.x * 100; var value = "polygon(0% 0%, 100% 0%, 100% "+ percent +"%, 0% " + percent + "%)" TweenMax.set(this.elem, { webkitClipPath: value }) } } // used like this TweenMax.to(generic, 1, { x: 1, onUpdate: generic.update.bind(generic) }) Great way. Lots of control; easy to read. Accessible. But for me, very personally, in almost all cases this felt like an "overkill"– I never needed that object again, or even worse, needed multiple "instances" of object. I always had to scroll up to fiddle with details, play around to find what I need. All this binding, writing the object name so often. And then I want to change the name, because .. reasons– I forget– and. Ah! I like to stay inside the timeline, as long as possible. Most of you seem to disagree with me on this one, when I bring similar issues to you, where I don't want to leave the timeline. Lastly the Matrix reveals itself way more often to me and starts to lose it's blur. And now it hit me. Creating an object on the fly to tween is no biggie, but getting access to the tweened value for the onUpdate function? As I become more and more comfortable with logging and sniffing what the tweens have to offer, I found that `this.target` inside "onUpdate" gives me exactly what I needed. // somewhere in a timeline or as a standalone Tween .to({ x: 0, elem: ".box" }, 1, { x: 1, onUpdate: function() { // this.target is the key to the properties! var percent = this.target.x * 100; var value = "polygon(0% 0%, 100% 0%, 100% "+ percent +"%, 0% " + percent + "%)"; TweenMax.set(this.target.elem, { webkitClipPath: value }) } }) // or .fromTo({}, 1, { x: 0, elem: ".box" }, { x: 1, onUpdate: function() { ... // or // tween the actual element in order to access function based values / index etc., or staggering? // and add your own custom properties .fromTo(".box", 1, { customX: 0 }, { customX: function(index, elem) { if (index % 2 == 0) return 1; else return -1; }, onUpdate: ... // or // just add multiple colors for a gradient change .fromTo(".box", 1, { customColor1: "green", customColor2: "green" }, { customColor1: "yellow", customColor2: "blue", onUpdate: ... I wanted to share this with you guys, just in case out there are people with the same fear and anxiety to leave the timeline 8) Louis out. *macdrop*– waitwhat?! –****!

Good news, @GreenSock took a peek at the clip-path issue and made some tweeks so the complex strings should work now. No need for generic object stuff. Give this a look: It loads a beta version of TweenMax with CSSPlugin: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js As Blake noted earlier its important that the values you are tweening from and to have the same number of numbers.

Using getVelocity won't work without the throwProps. But even with that working, your function is going to change the frame at a constant rate regardless of how fast you are dragging. Is this more like what you were going for?

Ha, don't worry. I kind of stole this from Jack recently. Overheard it while I was re-doing the bathroom tile

No problem at all. And I'm sorry I don't have a great answer for you that gives you all the functionality you wanted. I guess with all these browser inconsistencies, sometimes we've gotta make some compromises. Cheers!

Ya I was going to ask if it will be good idea to follow thread I mentioned in previous reply, but ya it disables touch scrolling completely. Thanks. I had given up already once I found out contextmenu is causing it and after reading your research I think only choice is to let it be. Sorry for assuming you are ignoring my thread. Thanks alot.

Hi @Conversant Welcome to the forum. This should work for you: if (window.CustomEase && window.ScrollToPlugin) {} Happy tweening.

FYI we snuck in downloadable docs recently. Check any page in the docs

Sure, you can combine cycle with morphSVG. You just had an extra "," in your array, and your "birds" was only one element, not an array (the stagger methods expect an array or array-like target). Use querySelectorAll() instead of querySelector() for ".birds" and you should get the result you wanted. Does that help?

SumblimeText is a text editor, so it won't be able to do a lot of that stuff. And all the people who made plugins for ST are now using VS Code. Just give it a test drive.

Even better use pixijs - webGl with a canvas fallback. https://github.com/pixijs/pixi-particles https://pixijs.github.io/pixi-particles/examples/fountain.html This would be the easiest way to get a fountain effect

Thank you Craig for this quick answer! It works! Strangely, the code I had use to work on a project using 1.19.1. The problem appeared as I updated to 1.20.2 Thanks again

Those definitions are really bad, and are setup for module imports only. You could try something like this. var TweenLite = gsap.TweenLite; Or replacing those definitions with the old ones. I'm working a new set.

I don't think it's getting released, it's not firing the onPress because on certain devices in order to accommodate native touch scrolling, it has to wait for the first movement to discern the user's intent. Your code is written in such a way that it'll keep moving the element unless the onPress is fired, so I bet you're assuming it is calling onRelease because it keeps moving (right?). Try setting allowNativeTouchScrolling:false on the Draggable. Seemed to work well for me.

Yep, @OSUblake is a rock star around here. Not exactly an "employee", but certainly an authoritative moderator and we consider him very much a part of the GreenSock family, along with all the other moderators like @PointC. Happy to hear about your positive experience thus far, @Sembiance. Let us know if you need anything else. Happy tweening!

Not really sure about what you are describing. It would really help if you could create a very simple demo that clearly illustrates the problem with onRelease using as little code as possible. I quick test shows that onRelease will only fire when a release happens: If the issue is present in that demo please let us know what OS and browser you are using. Looks good on this end.

Blake, I love u Guy! <3 Working...

Blake, thanks so much for the swing example. It looks quite promising and I think that would be a great way to implement things and it shouldn't be too hard to do while dragging. I'll dig into this more once I get some of the items I'm currently working on completed. I just have to say that you have gone above and beyond and this forum wouldn't be the same without you. Not sure if you are an employee of GreenSock or not, but if not, they owe you a big debt as these active forums is one reason I ended up choosing GreenSock to begin with. Thanks!!!!!

You can listen for media query changes. Here's a demo that reacts to media query changes and resize events. Notice how I save the state of the animation before I clear it, allowing the new animation to start in the same state as the old animation.

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).