chrisgannon

Here's a fully random version in GSAP 3.0 using the new each, wrap and repeatRefresh: https://codepen.io/chrisgannon/pen/eedc13af50b6269167c85a2667d522dc

I've never liked the above 'flag' solution - it's messy and sprawling. I'd like to be able to do something like: let tl = new TimelineMax(); tl.to('#el', 2, {y: 40, repeat: -1, yoyo:true}); //later tl.repeat(0); //this would make it play to the end and stop

Hey Jack, I'm running into this issue too with Spin2Win Wheel. All reports of Draggable not working are coming from Android users running Chrome. I just tried this beta version of Draggable and that has fixed it! Is this version of Draggable distributable yet? I need to offer a fix to customers sharpish.

Hi, I made this tool called ScrubGSAPTimeline a while back that enables you to scrub through a timeline using your mouse. Not sure why I never posted it here. Or maybe I did - my memory is terrible. Anyway you can move your mouse out of the window to play the timeline animation and it plays from where your mouse was inside the window - so if your mouse was 45% along on the X axis of your window when it left, your animation will play from 45% of the way through the timeline's duration. You can also double click to pause scrubbing. This is useful if you want to right click and inspect an element in dev tools. You'll need to set the position of your main DIV/SVG container to absolute (I think!) otherwise you won't see the time display. I use this on every single animation project I make now so I hope you find it as useful as I do. GitHub https://github.com/chrisgannon/ScrubGSAPTimeline CodePen demo: http://codepen.io/chrisgannon/pen/zGmdBN Cheers, Chris

Thanks Waren

Cheers Blake!

Hey Blake, On the contrary I think there are several obvious applications but I'm sure there are many more less obvious ones - the very fact that the ease on the tween continues at the correct rate is a huge feature. Not only will gamers benefit from this but animators too. As always excellent work Blake - I'm going to take this for a proper spin this week - add it into some projects and see how I can apply it. Btw should this work with plugins like DrawSVG?

Thanks for the heads up on this Carl - it looks really interesting and with some more thought I imagine there all sorts of possibilities. Out of curiosity how would this example work if you wanted the boxes to move left instead of right? I tried a few things but nothing worked. http://codepen.io/GreenSock/pen/QEdpLe I also tried it with SVG attributes using the cycle syntax which didn't work.

I've had to create an iOS typing effect recently so I thought I'd share my solution. It's not the same as the demos above but it's another approach with a similar result. http://codepen.io/chrisgannon/pen/59fc3a0af0202d2b9648443766f9afe5

This looks exactly like the kind of ease I've been wanting. Back.easeIn sometimes needs a smooth easeOut and there it is - great work

I used this technique sort of to create this - it was a massive ball ache http://codepen.io/chrisgannon/pen/05bb421481b94c6941b746e83fb3a91c I don't recommend anyone else try it as the result to effort ratio is pretty lopsided (the wrong way).

Some of my demos may be of use (functionally speaking). http://codepen.io/chrisgannon/pen/QbLMxz http://codepen.io/chrisgannon/pen/BNaVQO I've implemented draggable SVG elements using onUpdate to move them.

Ok I just read on another post that I don't need to use the AttributePlugin. D'oh.

As a follow up I'm finding that even though I declare 'fill' in the attributes this same thing is happening. I can't animate the fill (using AttributePlugin) from one colour to another. It just jumps to it at the end of the tween. Any ideas?

Great idea and it works a treat.

Was the opacity of eLinkedInTekst ever 0? If not tLinkedInTekst won't ever know that a 'reverse()' call means that eLinkedInTekst's opacity should return to 0.

Hmm initial tests with this Draggable version are showing more jank than using pointerEvents:none;

Sweet Jack thanks. I'll give that a whirl. Could be a lifesaver!

The issue I'm facing with Draggable.disable(); is that often I want to use it with ThrowPropsPlugin and disable just the dragging part whilst the object is being thrown (FYI the onThrowUpdate is telling other elements to move too). However when I call Draggable.disable(); on onDragEnd it seems to prevent the ThrowProps onThrowUpdate from firing which isn't what I'm after. Any ideas on how to simply prevent the element from being draggable whilst maintaining ThrowProp's onThrowUpdate? Currently I'm having do pointerEvents:'none'; on onDragEnd which causes the infamous jank :/

Good stuff Jack.

I use this method all the time - I kind of stole it from this idea/behaviour from After Effects' Null object. It's very flexible in that you can assign any object to the position/rotation/scale of the proxy (or null object) and thus create some great parallax/delayed effects. I tend to give the null object no height or width and add in the trigger property. I also tend not to refer to 'this' in the function in case I want to call doDrag from a manual tween on nullObject using onUpdate: var nullObject = document.createElement('div'); document.body.appendChild(nullObject); Draggable.create(nullObject, { type:'x,y', trigger:yourContainer, onDrag:doDrag, throwProps:true, onThrowUpdate:doDrag }); function doDrag (e){ var posX = nullObject._gsTransform.x; var posY = nullObject._gsTransform.y; TweenLite.to(realObject1, 1, { x:posX, y:posY }); TweenLite.to(realObject2, 1, { rotationX:-posY, rotationY:posX }); //...etc } I've added in throwProps so you can see how that works too

First off you have a rogue square bracket after the Volcano line. I would also recommend assigning different variable names to your elements. This will cache them making them usable later. I've also removed the css object (which you are using correctly but is not required). Try changing... // Gets an element. For example, // var element = sym.$("Text2"); // element.hide(); var element = sym.$("Geyser_Pic"); TweenMax.to(element, 1, {css:{right:"0px"}}); // Gets an element. For example, // var element = sym.$("Text2"); // element.hide(); var element = sym.$("Volcano");] TweenMax.to(element, 1, {css:{right:"150px"}}); // Gets an element. For example, // var element = sym.$("Text2"); // element.hide(); var element = sym.$("HotSpring"); TweenMax.to(element, 1, {css:{right:"100"}}); to this: //tells it to go to x pos 0 var geyser_pic = sym.$("Geyser_Pic"); TweenMax.to(geyser_pic, 1, {x:0}); // Moves it 150px to the right of its current x position - the quotes mean 'add this value to my current var volcano = sym.$("Volcano"); TweenMax.to(volcano, 1, {x:"150"}); // Moves it 100px to the right of its current x position- the quotes mean 'add this value to my current var hotspring = sym.$("HotSpring"); TweenMax.to(hotspring, 1, {x:"100"});

Hey Rodrigo, Good to know thanks!

Hi Rodrigo, I tend to add the CSS I need only to the individual elements that need it and never to all elements. The simple reason is (and I might be wrong) that I would be adding unnecessary code to elements that don't (and will never) need it which can lead to bloat. Correct me if I'm wrong! Cheers, Chris

Hi Zhur, Rodrigo is right regarding 'preserve-3d'. In Edge Animate you can apply this to the symbol's element like this (using GSAP): var mySymbol = sym.getSymbol('symbolOnStage'); var mySymbolElement = mySymbol.getSymbolElement(); TweenMax.set(mySymbolElement, { transformStyle:'preserve-3d' }); Or apply it to all its children: var mySymbol = sym.getSymbol('symbolOnStage'); var mySymbolElement = mySymbol.getSymbolElement(); TweenMax.set(mySymbolElement.children(), { transformStyle:'preserve-3d' }); I tend to set the stage's perspective too but you could set the symbol element's parent persepctive (if that isn't the stage): var stage = $('#Stage'); TweenMax.set(stage, { perspective:1200 }); And: var mySymbol = sym.getSymbol('symbolOnStage'); var mySymbolElement = mySymbol.getSymbolElement(); TweenMax.set(mySymbolElement), { perspective:800 }); Or maybe set the individual children's perspective (so they all have their own vanishing points): var mySymbol = sym.getSymbol('symbolOnStage'); var mySymbolElement = mySymbol.getSymbolElement(); TweenMax.set(mySymbolElement.children(), { transformPerspective:800 }); I don't know your structure so it's difficult to say what will work for you. What I do know is that if you want any 3D stuff to work in IE then don't nest any elements in other elements because 'preserve-3d' is not implemented even in IE 11 AFAIK. To get around this you must make sure everything is animating in 3D space on the stage. Btw I have built a coverflow in Edge Animate here: http://chrisgannon.wordpress.com/2013/09/18/youtube-javascript-coverflow-in-adobe-edge-animate-and-greensock/ There is the demo and source files at the bottom. Happy tweening!