Search the Community
Showing results for tags 'property'.
Found 5 results
-
Hi, I'm new to the forums, new to GreenSock GSAP too. So far I'm using it quite effectively with the 5% of what I've worked with I've got a bit of an issue trying to get a small script working. I wonder if anyone can help. The following code effects the x property with a randomisation of 2 possible values (-100% or 100%) which all works great: var wipeAnimation = new TimelineMax() .staggerFromTo('section.panelx', 1, { x:function(){ var randWay = parseInt((Math.random() * 2) + 1); if(randWay == 1) return "-100%"; else if(randWay == 2) return "100%"; } }, {x: "0%", y: "0%", ease: Linear.easeNone}, 1) The issue I have is that I also would like to randomise the property itself between 'x' and 'y' with the randomised value of before (-100% or 100%) var wipeAnimation = new TimelineMax() .staggerFromTo('section.panelx', 1, { function(){ var randWay = parseInt((Math.random() * 4) + 1); if(randWay == 1) return {x:"-100%"}; else if(randWay == 2) return {x:"100%"}; else if(randWay == 3) return {y:"-100%"}; else if(randWay == 4) return {y:"100%"}; } }, {x: "0%", y: "0%", ease: Linear.easeNone}, 1) I'm trying to return both the property and value as one as an object but does't seem to understand. Is there a way to do this? Many thanks Dal1980
-
Hey folks! I got this strange error only in IE/Edge and Windows Phones. Safari, Firefox and Chrome works just fine. check the site here: www.grace-restaurant.at when i animate the content it outputs me the following error into the console multiple times: unable to set property "cssText" of undefined or null reference. so first i thought, theres something wrong with the selector, i sometimes used a jquery selector inside using the method .not(). so i changed that, but the errors still occur. then i thought maybe its the css plugin so i deleted the use of css:{} gsap method where its not necessary. stil doestn work. I really have no clue what it could be. Of course i'm not assuming its a gsap bug or problem, but isn't it weird, that it only occurs in IE and Windows Phone? Maybe anyone has a clue what this could be? thanks in advance -
Hi! I'm today trying to get something, but i'm failed. I did own javascript animation platform, that can do part of thing of GSAP! But i need "In-Sync" tweening, basic users don't need that, but for sliders, tab-changed, Timeline GSAP script is best working. Missing some feature i need. TweenMax.to('#element', 1, { width : 200, height : 200, x : 100, ease : { width : 'QuadInOut', height : 'ExpoInOut' }}); // these syntax is for example, maybe have wrong syntax, sorry I can create this plug-in (pls let me read useful docs for creating plugin) and have already? It's reduces memory, CPU and size too. Thanks, Any reply appreicate. Sorry for english
-
I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
-
I'm trying to tween a custom object property with string values, but they are changed to NaN. Why are they been treated as number? .fromTo(_bg, 0.7, { currentBg:'bg1', curentBgType:'gradient', ratio:0 }, { currentBg:'bg2', curentBgType:'gdImg', ratio:1 },0.001 )
