Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'properties'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 10 results

  1. hi guys , what the good way to do this in a timeline ? .from([item1,item2,item3], 1, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') My arrays items are dynamic and never same, and i want to dispatch the random value in properties for each items in the array ? what the best way to proceed and for keep a good readable structure in the timeline. I can maybe do something like this , but it kind weird ! and ugly code. tl.call(() => { items.forEach(it => {tl.from(it, 0.2, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') }) },null,null,'#item') If you have some suggest, i take it
  2. Sorry to bother again guys, there is another quick question if you don't mind me asking. I had a look under the hood into the _gsTransform object and it has a few properties. I was able to relate some properties but it would be great to know better about which _gsTransform property are related to what CSS property. Here it is: perspective: ? rotation: ? rotationX: ? rotationY: ? scaleX: ? scaleY: ? scaleZ: ? skewX: ? skewY: ? x: ? y: ? z: ? zOrigin: ? I am sorry if this has been asked before, but I couldn't find any reference to these. Some light on this will be really helpful. Thanks, Praney
  3. Please note that I'm heavily editing my pen, so I just put some code below too. Sorry if this is a silly question, but is my assumption in the comments below correct? That I can set ```transformOrigin``` in the constructor as a default fallback property? Yes, I realize that it would be the normal way, but don't have time to set up a test and I'm being lazy hehe function targetReady() { var tl = new TimelineMax(); //If I pass a property to constructor like this origin: //var tl = new TimelineMax({transformOrigin: "center center"}); //Is my assumption correct that this will be an overridable default fallback, such that any .to, .from, etc., that supplies it's own will take precedent? Also, if it supplied a svgOrigin property...would that take precedence over transformOrigin set in the constructor? //Trying to "DRY up" this sort of redundant setting of transform origin: tl.addLabel('targetReady') .from(finger, .7, {opacity: 0, x: -400, ease: Linear.easeNone}, "targetReady-=.5") .from(circleStroke, .7, {opacity: 0, x: 400, ease: Linear.easeNone}, "targetReady-=.5") .to(finger, .1, {scale: .99, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(circleStroke, .1, {scale: .98, y:1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(finger, .1, {scale: 1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .to(circleStroke, .1, {scale: 1, y: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .from(glass, 2, {opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2") .to(circle, 1, {scale: 30, opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=1") .set(circle, {scale: 0, opacity:0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2.2") .to(circle, .5, {scale: 1, opacity: .4, transformOrigin: "center center", ease: Power2.easeOut}, "targetReady+=2.4") .to(uxTest, 2, {opacity: 0, scale: 0, svgOrigin: "center center", ease: Linear.easeNone}, "targetReady+=3") .from(checkmark, 2.5, {opacity: 0, scale: 0, transformOrigin: "center center", ease: Back.easeOut.config(1.7)}, "targetReady+=4.5") return tl; }
  4. Hello I'm just starting with TweenLite and TweenMax. Please accept my apologies for this - I guess - very basic question : I can load external swf on stage using TweenLite or TweenMax but the huge problem (for me :-/) is to get access to loaded content : function, properties, etc. For example, I would like to send orders to a loaded swf to call internal swf functions or properties. In other way I'm seraching for the code who allow a virtual transparency of loaded content in order to interact with loaded content like normal content, on stage. For example I load inside a container swf containing an instance of SlideShowPro inside a container but I cannot find the way to send things like : container.(SlideShowPro-Instance-name).properties = something or call a function inside loaded swf. How to virtualy get access to loaded content as it was on stage ? Thank you very much in advance for your help !
  5. Hello.. i am trying to clear properties on a tween and/or timeline. But no matter what or where i use it, it wont clear the properties off the element (image). sample code below: var tl = new TimelineMax({ paused:true, autoRemoveChildren:true, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }); tl.add( TweenMax.to($("img"), 4, { css:{ transformOrigin:"left top", scale:1.5 }, clearProps: "transformOrigin,transform,scale", //clearProps: "all", ease: Linear.easeOut, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }) ); tl.play(); and here is my codepen example: http://codepen.io/jonathan/pen/rwFva as you can see using your browser code inspector/console.. you can see how after the animation completes the transform properties do not get cleared. You can see how i tried 3 ways that are commented out: the clearProps that is called in the onComplete callback of the Timeline using the set method the clearProps that is called in the onComplete callback of the added Tween using the set method and the clearProps property on the added tween. No matter which way i try to clear properties, i cant seem to have the element clear the properties GSAP has added. If you check my code pen example commenting out each way you can see how its not clearing the style attribute css properties: transform matrix3d, transform origin or any css that GSAP adds to the element (image). Any help will be highly appreciated!
  6. I have a sequence of functions (frame1(), frame2(), frame3(), etc.), that each return a timeline instance, which I then string together in a master timeline. All is good, for the most part, except that in the last frame(), I use .set() to move a div up by 35px in y. For some reason, that position change is happening when the master timeline first starts, as demonstrated in this pen: http://codepen.io/flysi3000/pen/epdmee/ So, in this example, the image should start out at y = 0, and then at at the end of the animation, be set to y = -35, then slide in. By the way, the image is clipped via the css clip-path property, and I am changing that clipping path's height to reveal more of the image in frame2(). Any idea why that's happening?
  7. Is it possible to tween an object's property if the value of the property contains units (px, %, em, etc)? See code pen example. I'm expecting myObject.left to have a value of '200px' after 5 seconds.
  8. The Flash version used to have a plugin for Dynamic Props which allowed you to continuously update the properties. Is there something like that for the HTML version? Even being able to simply call TweenMax.updateTo(targetObject,.5,{property:newPropertyValue}); would be awesome... The problem is when it completes, you can't call updateTo again. Instead, you need to check to see if it is tweening and call updateTo() or if it stops call to(). It would be great if updateTo would simply create a new tween if it already finished.
  9. Hi, I have a text (blockquote) that should move from right to left constantly. It should start with opacity 0 then go to opacity 1 in 2 seconds. After that, it should keep moving constantly (same speed) for about 10 seconds and then fade out (back to opacity 0) but keep moving in the same speed. I've tried this way, but it doesn't get the correct movement I want: var tl = new TimelineLite(); tl.to('.quote1', 2, { opacity:1, right:"+=50px", delay:3 }) .to('.quote1', 10, { right:"+=150px" }) .to('.quote1', 3, { opacity:0, right:"+=50px" }); What I want to know is if it's possible to have a timeline for each property (e.g. "right" and "opacity") or if there is a better way to achieve the same result with only the object timeline...
  10. Is setting animation time to 0 the (efficient) way of setting properties in gsap? I mean for instance, setting the timeline progress to 0.5 immediately when the html has been loaded: TweenLite.to(tl, 0, {progress:0.5}); ?
×