Luckyde

Updated now using background colours. Still has gaps but at this point i'm just happy it works http://www.luckyde.com/ipad/Triangle/index.html (on desktop you can use the scroll wheel to zoom instead) Hopefully i'll figure out what is causing these lines at the end of objects the more i work on this.

I was going for a isometric perspective, i've done several revisions since then and i still see small gaps but i'm really close now. Apart from the gaps it all works now, i just need to sort the small gaps http://codepen.io/LuckyDe/pen/NrNgmb The code has gotten a lot more busy but I had to do it so that it works on android in webview e.g. var xN = Number(xBar.value), yN = Number(yBar.value), zN = Number(zBar.value), Sc = Number(defaultScale.value); TweenMax.set(baseRef[0], {rotationX:(xN*(Sc-1)/2 +xN) ,rotationY:(yN*(Sc-1)/2 +yN),rotationZ: zN }); I had to offset rotation values with the scale value so that it lands perfectly on the right angle on launch on android in webview for the app(Note works fine outside of webview, that's something i dont expect someone here to know, our app is built strangely). But yeah if could give me tips on the tiny red gaps that would be amazing Screenshot (using chrome 50.0.2661 on desktop) You can use the scroll wheel to zoom into it and drag the stage to rotate it

SUCSESS! I figured out why it was doing this. For anyone who's dealing with GSAP and Webview The problem was when I .set the scaleX and scaleY value it doesn't respect the scale that the html file becomes after processing. Changing it to width and height solved it! Width and height scaled properly where as scale did not. @Jonathan is it possible for you to take a look at my new code and let me know how I can optimise it a bit more so I don't see tiny gaps on some devices? http://codepen.io/LuckyDe/pen/jrWQjG I set the margin to 0, padding to 0 in the css, set all the svgs to reserveAspectRatio="none", and position: absolute But I do still get small gaps on scaling so if you know what I've forgotten please let me know Otherwise thanks for all the help, I really appreciate it!

Yes I've tried adding the meta tag, but it gets overwritten on publish. I think this person had an issue similar http://stackoverflow.com/questions/21460623/use-meta-viewport-width-in-android-webview and I'm assuming WebSettings settings = webView.getSettings(); settings.setLoadWithOverviewMode(true); settings.setUseWideViewPort(true); gets fired off as soon as any ad goes into the ad container in the app . I believe it's happening via view port but i don't have access to the back end to find out for sure. I have in my research found that on IOS it sticks to 980x670px no matter the model, but on android the stage can go up to 1500 by 1025 and down to 400 by 273 depending on the model. Most things we build using hard values has no affect as it scales them up and down properly. But client x/ page x doesn't for example get recognised and it returns the wrong value so i offset it by the scale amount to make it work. And with this I'm assuming it's reading the values of some hard number and it stays on that value no matter the scale, so i need to find out what value i need to multiply by the scale I think... As yeah if you look in the screen shots if the android device is big the z Offset goes up, if it's small it goes down

Sure Jonathan, but again your phone will see it fine, i dont think you have the app we use. The app is webview based, it's what powers up LaPresse and The Star Touch and it only appears there. So thats the dificult part, i need to keep re-sending the html and js files into the app to test over and over. This issue wont really happen on the browser only in the app because the entire stage gets scaled depending on the device model because thats how they've designed the backend. So I've gotta work around that entire scaling thing that the app applies after the files are sent. It almost never causes problems, it does scaling well. The only time it has so far is it can't figure out where page x and page y is on touch events because it thinks its somewhere else because of the scale(which i solved with the above script) and now this issue... So i guess the main question is how does GSAP behave once the entire container (document.documentElement.clientWidth and window.innerWidth ) is being scaled and what values should I add the scale amount to to off balance it. Sorry for the headache hahah Edit: New code pen using your suggestions http://codepen.io/LuckyDe/pen/KMVrdM Still has the scaling issue in webview sadly

Hey Jonathan, thanks for all the ideas, I'll apply some of this and yeah it's bizzare because it's not android's built in browser that's the issue it works fine. It's the app we're using's webgear that is causing it. After testing more and more things i found that doing this function var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if (is_touch_device()) { scale = w / parseInt(target.style.width); } else { scale = 1; } Returns me different numbers and accurately on the big models scale goes up to 1.3, smaller 0.8, ios 1 exactly so on android the entire stage gets scaled up and down. Now that I have this scale value as a variable if i apply scale somehow to the gsap stage it would refrect accurately across devices. Do you have any ideas on that? Here's a visual I changed the base values by multiplying the Z values twice by the scale start = { x: 0, y: 0, z: 50*scale, xW: 200, yW: 100, zW:80*scale }; And here's what i got small android big android ios so its definetly making a difference i just need to figure out where to plug in the scale

Hey guys, I'm building some test shapes in 3d, and they're working great so far. I can add, insert new planes , keep them as svg and it's going great... BUT the ads we make here go into a tablet in a WebKit/Webview enviroment. When they do on IOS it looks perfect On Android No matter the size the planes shift Android 1 Android 2 Both different models, and massive screen size differences I tried to figure out how to prevent this from happening, all my values are based off start values which are x y z values so i'm not using hard numbers i dont think... I tried to debug it as best i could and android just doesn't play ball. It wont return offsetWidth, device width returns random numbers which aren't realistic to the stage, device width returns 0, viewport width returns 0... But i dont know if any of them are the reason why this is happening. From what I see the top and bottom planes are perfect, but the side planes are all shifting.. Do you have any idea why? Also off topic but again the codepen made my box different and skewed it.. looks skewed. When it looks like what the above ios screenshot looked like on my desktop(and thats the way it should). But yeah I'm mainly really concerned about those gaps. Any tips? Thanks!

Thank you so much for your help guys! Sorry for the late reply, i had to rush out the ad so i ended up controlling the multiple timelines at once but for the next project I'll know to use your refferences as guides on organising it all into a single timeline, I really appreciate the help

Thanks, but again that doesnt really work in this case and I'd really like to not use jQuery just for this issue as it will eat up more filesize for what I'm building and i need the filesize. Do you have a non jQuery solution possibly? I just need the timelines to join up into one and have it not snap into different places on repeat and break the timeline

Update: http://codepen.io/LuckyDe/pen/pbvMYj I'm not there yet but ive organised all of the items into seperate timelines now, i need to figure out how to organise all of those timelines into a single timeline and have it on repeat not to pause everything/have the same issue as above. Any suggestions on how to do this? So i have the control to stop pause and move the master timeline into positions? for(var i=0;i<itemCount;i++){ TweenMax.set(boxes[i], { x: (galleryWidth / 2) - itemWidth / 2,z:0}) timeLines.push(new TimelineMax({paused:true,repeat:-1})) timeLines[i].add( TweenMax.to(boxes[i], SpinTime, {bezier:{type:"soft", values:circlePath},ease:Linear.easeNone } )); timeLines[i].progress(1/itemCount *i) timeLines[i].play() } The long winded way of getting the multiple timelines to work

Hey guys, I'm really stumped here and i can't figure it out. I'm trying to build a 3d carouselle, but when i use staggerto with delays to make it work on restarting the timeline everything snaps into their positions on initial setup. Is there a way on restarting the timeline to remember where everything in the stagger to is stored and continue from that position to keep looping? Also side topic but on putting my code in the pen the perspective changes even though the code is exactly the same. Localhost http://www.luckyde.com/js/assets/Screen%20Shot%202016-06-02%20at%2011.44.11%20AM.png (and it breaking) http://www.luckyde.com/js/assets/Screen%20Shot%202016-06-02%20at%2011.44.15%20AM.png Pen http://www.luckyde.com/js/assets/Screen%20Shot%202016-06-02%20at%2011.44.24%20AM.png And i used document.onreadystatechange because on initial load things seemed to snap into their locations and i was trying to find a way to have all the elements in the right place on setup not snap to it. Ideally i'd like for the timeline to be paused at a location and then on trigger of one of the items it to start spinning to that item(which could work with progress() if i manage to find a way to fix the timeline) Any ideas on how to fix this? Thanks!

Hey Jonathan, again thank you so much for all tips! Today I learned the staggering, labeling , sequencing and found your shapeIndex debugger online so that was extremely useful! I think I got it working now http://codepen.io/LuckyDe/pen/OMBwjb If you think there are easier ways or better ways than this for making a morph sequence which also has a gradient in a morph let me know! I need to do 9 more of these pieces of paper by monday. With that gradient cycle is there a way to indicate to push the gradient by one (lets say it has 5 gradient stops) so instead of Overwriting the gradient on blend 1 2 3 4 5 Width the cycle[] of colors to 6 7 8 9 10 To instead push 1 shade so that it becomes 2 3 4 5 6 So you wouldn't need to rewrite the whole gradient each time? Also I forgot to ask last time why do you have a stopcolor declared twice on your example stopColor:'#cc0000', cycle:{ stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888'] But these are now just questions for making my life with this easier, overall you've more than defiently answered my original question and i owe you a lot thanks!

You're amazing! I'm still trying to wrap my head around all this , that's a lot of new stuff and thank you for this! I wanted to ask why did you stager to SVGID_3_ stop and not just the id? Does adding stop trigger it since It's animating the stopColor? Also could I move that gradient using the same reference or do I need to go SVGID_3_ topleft or something similar to make it change position? Thanks again for all this help!

Bump, could still use some help on any of the above questions

Well I learned something new today Codepen URL: http://codepen.io/LuckyDe/pen/MKPKGW/ Notice how the morph works but the basic tween after that doesn't. Is there a way to make that work or to change the left, top, or opacity of the gradient And in a perfect world to manipulate somehow the gradient's data so it morphs the gradient with Tweenmax? And note how illustrator makes me these clip paths, but on threads like http://greensock.com/forums/topic/13675-animating-svg-linear-fill/ I see you're using 'mask' tags, is there a difference between the two?

Hi guys, I love gsap, have used it for years from flash to js and i just bought the premium kit. Its fantastic, however I have a question. I'm trying to create an effect which involves bending paper which has a gradient on it. I found a way to do it was to use a flat shape over the gradient svg data from illustrator and then morph that flat shape into a new flat shape. And since it's a clippath it makes a great effect over the gradient. However I can't seem to move the gradient svg like i can the Path shape. Do you know if you can either a ) Move/scale/make transparent gradients from illustrator with tween lite/max b ) Ideally manipulate the gradient information with tween max If b ) causes more processing power then ignore that part since this is meant for tablets(my ad) so I wouldn't want it to chug. Also he code that illustrator spat out looks something like <defs> <path id="MainPath" d="M231.848,158.387c-33.09,0.716-74.07,8.37-98,13.464v204.45c15.938-0.297,76.668-0.936,130,5.086 c63.875,7.213,167,24,167,24s10-40,16-113c6-73,5-112,5-112s-29-9-60-14c-26.627-4.295-68.757-8.343-128.907-8.344 C253.064,158.043,242.709,158.152,231.848,158.387"></path> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#MainPath" style="overflow:visible;"></use> </clipPath> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-43.4204" y1="504.0273" x2="-42.4208" y2="504.0273" gradientTransform="matrix(349.917 -158.4003 -158.4003 -349.917 95195.0625 169869.4375)"> <stop offset="0" style="stop-color:#D1D3D4"></stop> <stop offset="0.2729" style="stop-color:#C8CACC"></stop> <stop offset="0.4812" style="stop-color:#BEC0C2"></stop> <stop offset="0.6409" style="stop-color:#CBCDCE"></stop> <stop offset="0.9367" style="stop-color:#EEEEEE"></stop> <stop offset="1" style="stop-color:#F6F6F6"></stop> </linearGradient> It's really bizzare that I can't modify SVGID_3_ but I can refer and modify everything else. And one more question. Illustrator exports clip path but I'm seeing you guys use a "mask" parameter. For svg is it the same thing? Or faster? Less support? Sorry for all the questions and thanks!

Hi Rodrigo, thanks for that However as mentioned above the method with css and a div inside a div tag doesn't work in my case "<div id="cubeParent"> <div class="cubeFace" id="face1"></div> <div class="cubeFace" id="face2"></div> <div class="cubeFace" id="face3"></div> <div class="cubeFace" id="face4"></div> <div class="cubeFace" id="face5"></div> <div class="cubeFace" id="face6"></div> </div> </div> " Is it possible to create the "$("div.container)" using Javascript and place the 6 sides ( $("button#btn1-6)) inside of it then rotate it? Without the div in div way using html.

Hi guys, I'm doing a 3d template for a job using a html5 software for designers and I need to figure out how to do a 3d turning box using js and not css classes, because the program is very limited. So i figured out thanks to the forums and help docs how to set up a 3d box using a couple of IDs and rotations, but I can't figure out how to make it rotate as a whole. When i use rotationX Y the sides rotate relative to themselves and not the whole box. I don't have the ability to use Divs inside of divs inside this software but I can use element ids. So I have 6 elements with Ids sides1 to 6 and my code is On setup var cubeSize = 200; TweenLite.set(sides[i].parentNode, {transformStyle: "preserve-3d",perspective:800,perspectiveOrigin:"50% 100px"}); sides[i].style.opacity=0.3; sides[i].style.width=cubeSize+"px"; sides[i].style.height=cubeSize+"px"; sides[i].style.left="0px" sides[i].style.top="0px" On Drag stageLeft = (event.pageX-mainStage.offsetLeft); stageTop = (event.pageY-mainStage.offsetTop); centreX = (parseInt(mainStage.style.width)/2)-stageLeft; centreY = (parseInt(mainStage.style.height)/2)-stageTop; sides2Left=(parseInt(mainStage.style.width)/2)-parseInt(sides[2].style.width)/2 TweenLite.set(sides[1], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2, z: 100+'px' }); TweenLite.set(sides[2], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationY: 180, z: '-100px' , transformOrigin: "50% 50%"}); TweenLite.set(sides[3], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: 90, rotationZ: 90, rotationY: 90, x: '100px', transformOrigin: "50% 50%" }); TweenLite.set(sides[4], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: 90, rotationZ: -90, rotationY: -90, x: '-100px' , transformOrigin: "50% 50%"}) TweenLite.set(sides[5], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: 90, y: '-100px' , transformOrigin: "50% 50%"}); TweenLite.set(sides[6], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: -90, y: '100px' , transformOrigin: "50% 50%"}); And it results in http://www.luckyde.com/ipad/boxtest/index.html Which is great, but as soon as i introduce rotationX, Y relative to the centre of the stage they start rotating relative to their own centre. I'm sure this is super basic, but what variable am i missing that I can say rotate based off that, or is there a way to group these getElementByIDs in javascript into one and rotate that? Prefferably the first option Thanks so much for your help!

also with a test file with a bit of an update using a temporary value tracer... giving me pretty similar issues to 2.0's random rotation in every direction bugs... as well as the text bugs...urg https://www.dropbox.com/s/l9ruty0plzibd6n/as3.zip

Hi guys, I'm starting over in AS3, wanna make a better version still a complete beginer at it, but i'm hoping the rotate function in 3.0 has more control. Is there a way to track the current progress in 3.0? I'm going to set up the menu items on a circle again and rotate on click package { import flash.display.*; import flash.events.*; import flash.text.*; import com.greensock.*; import com.greensock.plugins.*; import com.greensock.motionPaths.*; TweenPlugin.activate([CirclePath2DPlugin]); //summon the XML Loader class which has the amount of boxes in it import XMLloader; public class MainClass extends MovieClip { //create a XMLLoader Instance var xmlimporter:XMLloader = new XMLloader(); //create the amount of boxes needed var AmountOfBoxes:int=9 var circle:CirclePath2D = new CirclePath2D(150, 150, 100); var boxes:Array; public function MainClass(){ boxes = new Array(); var BoxAmount = xmlimporter.HowManyBoxes for (var i:int; i<BoxAmount;i++){ createBoxes(i*10,i*10) } this.addChild(circle); function createBoxes(xLocation:Number, yLocation:Number){ var B:Box = new Box(); boxes.push( B.x=xLocation B.y=yLocation B.addEventListener(MouseEvent.CLICK, onClick); stage.addChild( var myText:TextField = new TextField(); myText.text = "Republic of Code"; myText.selectable=false; // the below causes an error //B.addChild(myText); } function onClick(e:MouseEvent):void { var b:Box = e.target as Box; var index:int = boxes.indexOf(; var boxToMove:Number=(index) trace('target =' +boxes[boxToMove]) TweenLite.to(boxes[boxToMove], 3, {circlePath2D:{path:circle, startAngle:0, endAngle:-90, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}}); } for (var q:int; q<BoxAmount;q++){ TweenLite.to(boxes[q], 3, {circlePath2D:{path:circle, startAngle:90, endAngle:(360/BoxAmount)*q, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}}); } } } } so now can I set up a function to rotate TO a specific angle instead of from to so they dont always start from 90? Then follow up question is there a way to trace out the current angle they're on so that on click the one clicked can go on the top and not go to 0degrees and then to the top? cheers Edit:also with 3.0 it gives me an error 1007 as soon as I put in a text box within the container both when manually placed in and when dynamically generated... not sure why

Thanks for everything Carl! I updated the circles with xml generated menus and submenus and even though its doing that reverse effect it still works and at the right speed it looks as if it's part of the design Really appreciate this man, couldn't have done it without you! You're the best!

its the last question guys I swear, I've almost got this! my deadline's end of day today , in future I'm switching over to as3 to be less of a pain i cleaned the code up a bit, but that damn reverse movement i cant get rid of! https://www.dropbox.com/s/1soudhzmp8hut4b/bezierCircle5.fla

applied to all the buttons it looks even more odd https://www.dropbox.com/s/jai3wahcot1tih1/bezierCircle4.fla

edit: check this code out: I just set the start position to this:progress and it worked haha! But it's doing an odd thing where if the object is almost at 0 it reverses. Try clicking on the circles on the top and you'll notice one of them keeps spinning the wrong way... thoughts? https://www.dropbox.com/s/8u937qcjo84mqfp/bezierCircle3.fla ] import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; TweenPlugin.activate([BezierPlugin]); radius=120 menuOptions=8 //place circle function function placeObject(myObject,Location){ this["tween "+myObject._parent._name] = TweenMax.to(myObject, 5, {bezier:{type:"cubic", values:[ {_x:0, _y:-radius}, {_x:0.55*radius, _y:-radius}, {_x:radius, _y:-0.55*radius}, {_x:radius, _y:0}, {_x:radius, _y:0.55*radius}, {_x:0.55*radius, _y:radius}, {_x:0, _y:radius}, {_x:-0.55*radius, _y:radius}, {_x:-radius, _y:0.55*radius}, {_x:-radius, _y:0}, {_x:-radius, _y:-0.55*radius}, {_x:-0.55*radius, _y:-radius}, {_x:0, _y:-radius} ]}, ease:Linear.easeNone, paused:true}); TweenMax.to(this["tween "+myObject._parent._name], 0, {progress:Location}); } //create circle function for(i=1;i<menuOptions+1;i++){ (i+1) duplicateMovieClip("circleContainer1", ["circleContainer"+(i+1)], 100+i) placeObject(this["circleContainer"+(i)].circle,0+i/menuOptions) this["circleContainer"+(i)]._alpha-=20 this["circleContainer"+(menuOptions+1)]._visible=false this["circleContainer"+(i)].onPress=function(){ trace(this._name) } } //move object script, currently not working function moveObject(myObject,amount){ TweenMax.fromTo(this["tween "+myObject._parent._name], 1, {progress:this.progress}, {progress:0+amount}); } this["circleContainer"+(1)].onPress=function(){ //get this button's number theNum = this._name.substr(15, 11); trace((theNum*1+1)) for(e=0;e<menuOptions+1;e++){ moveObject(Object(_root)["circleContainer"+((theNum*1+e))].circle,(1/menuOptions)*e) } } this["circleContainer"+(2)].onPress=function(){ theNum = this._name.substr(15, 11); trace((theNum*1+1)) moveObject(Object(_root)["circleContainer"+1].circle,-(1/menuOptions)) trace(-(1/menuOptions)) for(e=0;e<menuOptions+1;e++){ moveObject(Object(_root)["circleContainer"+((theNum*1+e))].circle,(1/menuOptions)*e) } }

Hmm this is working very smoothly, is there a tweenmax function for detecting the current position within a circle? I'm at the point now where im going to move the menu options on click so that the one that's pressed is on top, but whenever it moves it starts from 0 instead of the current location... I'm sure i'm missing something. What I've got so far import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; TweenPlugin.activate([BezierPlugin]); menuOptions=8 //place circle function function placeObject(myObject,Location){ this["tween "+myObject._parent._name] = TweenMax.to(myObject, 5, {bezier:{type:"cubic", values:[ {_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0}, {_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100}, {_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0}, {_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} ]}, ease:Linear.easeNone, paused:true}); TweenMax.to(this["tween "+myObject._parent._name], 0, {progress:Location}); } //create circle function for(i=1;i<menuOptions;i++){ (i+1) duplicateMovieClip("circleContainer1", ["circleContainer"+(i+1)], 100+i) placeObject(this["circleContainer"+(i)].circle,0+i/menuOptions) } //move object script, currently not working function moveObject(myObject,Location){ this["tween "+myObject._parent._name] = TweenMax.to(myObject, 5, {bezier:{type:"cubic", values:[ {_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0}, {_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100}, {_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0}, {_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} ]}, ease:Linear.easeNone, paused:true}); TweenMax.to(this["tween "+myObject._parent._name], 1, {progress:Location}); } //trigger the moving object script, set to 1 circle instead of all of them for testing this["circleContainer"+(1)].onPress=function(){ moveObject(Object(_root)["circleContainer"+(1)].circle,0.4) }