mimeartist

Thanks Carl, I need to sometimes disable 4 out of 7 panels... so it's very easy to look up an attribute of the divs and decide to then disable or enable them

Perfect... that worked... thanks Jamie!

Thanks Jamie, I'll try that! Seems I must of been trying to ref a whole array then.

I've got a set of panels that are draggable, but at times I want to be able to disable / enable them... I'm sure this is the correct way to do so, but getting an undefined error... dragArray=[]; totalPanels=10; for (n=1; n<=totalPanels; n++){ dragArray[n] = Draggable.create("#slide"+n, {cursor:"pointer", type:"left,top", throwProps:true, onDrag:function(){ peopleParallax(); }, onClick:function(){ slideClick(currentRollover); }, dragClickables:true, edgeResistance:0.9, bounds:'#siteContainer'}); } Can I not use dragArray[n] = and then the draggable code? and then use dragArray[2].disable(); dragArray[2].enable();

Ah! Thanks Carl, Yoyo looks useful James

Not a technical question really... I'm looking for a div to just bounce once when rolled over, can you use an ease that starts and ends at the same position but has a bounce ease attached to it? Or do I need to tween it to a position, and then tween it back?

I have a set of images that go horizontally, depending on the category it shows different ones, and you can scroll left to right... the trouble I am having is that when I use autoAlpha on items that have been set with visibility:hidden, when I set autoAlpha to 0 the images never fully disappear... so even if the last visible image was at 2000px you can still scroll to 4000 pixels because there is still an image there, even though it is 'invisible' What is the best way to handle this? set them to display:none after they finished their autoAlpha to 0, or am I missing something? PS I'm learning so much from this forum, so thanks to everyone who has helped me thus far! James

Are there any things in CSS I can use that will speed up Tweenmax particularly for large images? eg. -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; Or does Tweenmax handle this, also should these be applied to those that aren't images?

Thanks for the feedback... It's basically the update for http://madeinratio.com I'm trying to optimise... some interesting scaling things going on... and the new version of Safari that's just come out is struggling a little so giving it all a bit of a speed boost James

I'm trying to speed up an animation; basically I have 20 very large images (2000 pixels wide) on a large scrollable website (left to right) if you click on one then that scales to the screen, in conjunction with a scrollTo to allow for the centring etc ... I'm checking which ones are in view of the window and then animating the ones that will be seen by setting their duration to 1, and the ones that just need to move to there new position and not be seen are set to 0 Is this a good way of doing it? Or does setting the speed to 0 still use valuable CPU? Also does the plug0ni offer any of this optimisation already and am I just getting in it's way

hmm... I'm clearly an idiot... TweenMax.min.js is beta 1.9.7 and gsap is 0.1.6 I thought I had the latest versions... just launched studioaka.co.uk with these, perhaps will need to upgrade when I make some new changes Will try and get the newer versions.

I keep getting this error : invalid force3D tween value: true ...When I try this, the item animates as I want,but it doesn't like the force3D thing, am I using it in the right place? or do I need to assign it to the items first hand? I'd prefer that actually rather than setting each loop) TweenMax.to('#item' + n, theSpeedB, {left: myPosX+offSetX, top: myPosY+offSetY, force3D:true });

Hi, I solved it and thought I'd let you know the issue... nothing to do with tweenmax etc... and when I say solved it... basically when i went into portrait mode it appeared so it was all down to the level of zoom... so I think it is just a performance issue whereby safari must turn that sort of stuff off at certain levels... playing around with the viewport fixed for both orientations but obviously not ideal Thanks again... James

Hmm... I built a code pen and it works on here! annoying! http://codepen.io/mimeArtist/pen/Jzmyf

I'm trying to animate the position of a div along with the boxShadow... the position is working but the shadow isn't appearing on iPad it works in Safari fine... is this a known issue? TweenMax.to($(this).find('.thumbnailInside'), 0.2, { y:theY, boxShadow: '0 0px 20px rgba(0, 0, 0, 0.5)'});

Perfect! How long has timeSinceDrag been around?! Thanks again!

The aim is to have X amount of images in a long strip, that can be flicked along horizontally... but also allow for an image to be clicked... I believe I'm halfway there in that I need to put an on click on the holder of these images to stop propagation, but have got myself tied up in knots... http://codepen.io/mimeArtist/pen/AiCtu Basically I want the images to only register a click when they've been clicked on, and not when the strip is dragged (it seems the image will trigger a click if the mouse is then released whilst over one of the images in the strip

Thank you all for your help, I've set up all the CDN's to the latest ones, so that will help enormously in future, and thanks for setting up that codepen... I promise to use that in future ...and Rhernando & Jack, you're right it was because I was setting up a draggable with type:"x,y" and then Tweening left, top so have changed the draggable to "top,left" ...and seems to work (or am I better off changing the Tween?) Anyway, thanks again for all your help, the members here really do it proud

Slightly confused in that when I drag an item using draggable it works fine, but then when I try and move the image to a particular place by tweening it to say position 0,0 it is then offset by the amount (I think) I dragged the item from the original spot... I tihnk I'm using all the latest code... but is there a place to grab the other files other than just TweenMax... eg. is Draggable and ThrowProps and CSSPlugin available on a CDN? Thanks, James

Apologies if this is a little #lazyweb but been hunting everywhere to do a card flip type interaction, whereby you click a div and it flips around to show other content (text) on the reverse and then you can click back... I've been trying a number of jQuery plug-ins such as flip, and flippy... when someone suggested using gasp...which I'm already using... However I'm not sure how to implement the content on the back other than perhaps flipping the div through 90 degrees and then hiing and showing a new div... but not sure if this is the best approach? I've started with a flip that goes through 180 degrees, but am struggling straight of with it half disappearing behind the background image of the site, I'm guessing this is because I'm moving through z-levels from the rotation... anyway to solve this? I've tried upping the z-index of the div I'm rotating but this doesn't work... guess it's going through negative z-indexs Any examples you've seen would be great... If this is the wrong place to post this; I apologise! James

Thanks for the replies... I managed to make it work by using href's rather than javascript clicks.... probably not the best way to do something by just avoiding the issue! I struggle a bit with code pen, as to where to put the various links to .js files... is there a boilerplate of a standard green sock set up that people use as a starting point. James

I have a piece of text inside a panel and I'm using the draggable plugin and it works beautifully.... Within the text I have chapter points, and in another div on the panel i have links to those chapter points which when you click do a TweenMax of the scrollTop to the correct position. This is all working perfect on the desktop... but on iPad... the links just aren't clikcable... I've tried adding dragClickables:false to the draggable panel that it's sat but just not triggering the click... I thought it might jet not be doing the scrollTop tween... but i put a log in and it's not even seeing the click... So my question is how do i make links clickable in a div that is sat in a draggable div? Is there a command I'm missing... or should i put an invisible panel behind the clickable text and allow that to be draggable (which in turn affects the main panel and makes it move)?

Wow! So I thought.... hmmm how am I going to pick out what to animate etc... so thought I'd just paste in what I wanted to do... like this... TweenMax.to('#image1' ,2 , {'-webkit-mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%, rgba(0,0,0,1) 105%, rgba(0,0,0,1) 100%)'}); ...and it worked! I can knock off early now (I wish) James

Thanks Jonathan, I'm really only looking to use it on touch interfaces, mainly iPad as I want my fades to relate to the user interacting with the images, ... so not too much off a concern in this case... Thanks for the heads up on the CSSPlugin... will look into it now

Does GSAP support this? I'm basically doing a wipe of one image over the top of another, but with a soft edge to it... I've got it to display correctly statically... i.e. I've worked out the values for the gradient of the top image over the top whereby it has the following -webkit-linear-gradient... -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%) Whereby the 50 is the start of the gradient and the 55 is the end...i.e the blurry edge is 5% of the image... How do I target these using animate? so that 50 goes from -5 to 100 whilst 55 goes from 0 to 105 I thought about a loop and then just adjusting the css but can i access these as an animate instead?