Jump to content
GreenSock

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

Search the Community

Showing results for tags 'clearprops'.

  • 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

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 13 results

  1. Hi all, I have a page with clickable divs built with GSAP in vue.js. Clicking a div triggers a timelineMax animation that moves all three divs, changes their opacity, etc. When clicked, the “BACK” button applies the reverse() method, returning the divs to their original positions and styling. After reversing the animation, I am using the clearProps method to remove any remaining inline styling. As I am new to GSAP, I imagine there is a more elegant way of doing all of this but, it works. The issue arises when the user goes through this process again. When the divs are reset and user clicks one of them, the initial animation works but the reverse animation is very wonky. It seems to jump immediately to the beginning of the timeline, while simultaneously trying to reverse. It’s difficult to figure out exactly what’s happening because the debugger won’t step through the reversing timeline. Any advice would be appreciated. Thanks.
  2. Hi guys, I'm having an issue with restarting a master timeline with nested timelines and understanding to how properly clear props from elements. Basically, I have svg that uses symbols that have inline transforms on them applied when exporting from Illustrator. I'm animating x and y values. Then on btn click, I would like to completely restart and reset the animation and elements transform to initial values. The issue is that when I clear all props or just transform, it's removing the inline transform values that are coming from svg. But I would want to revert them back to initial state. Is there a way to achieve it? Hope my demo is helpful enough to show. Thank you!
  3. Hello I've got a modal which appears on a button click. I use clearProps to remove inline styles. tl.add(TweenLite.from('.ng_modal_dialog', 2, {left: "30%", backgroundColor: "red", clearProps: 'all'})); Then I do reverse(). Which adds them all back again. Can I clearProps after I've done reverse()? Thank you.
  4. Hi, I want to know how to clear all the animated properties from TimelineMax at once. not individual. like onComplete clearProp all or something like that and all the nested elements also. is there a way to use wildcard selector? ex: var tl = new TimelineMax({id:"sliderOut", autoRemoveChildren:true, onComplete:function(){ // i want to clear all the animated values and properties at once not individual }}); tl .staggerTo($nameSplit.chars, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"+=0") .staggerTo($descSplit.words, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .staggerTo($techSplit.lines, 0.4, {x:'10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .to($slide_img, 1, {yPercent:'10', autoAlpha:0, ease:Power4.easeOut},"-=0.5") .to($slide_left_svg_bg, 1.5, {x:'20%', autoAlpha:0, ease:Back.easeInOut},"-=0.5") .to($slide_right_svg_bg, 1.5, {x:'-20%', autoAlpha:0, ease:Back.easeInOut},"-=1.5") .staggerTo($staticTitleSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .staggerTo($numSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .to($left_out_bg, 0.5, {x:'100%', ease:Power4.easeOut},"-=0.5") .to($right_out_bg, 0.5, {x:'-100%', ease:Power4.easeOut},"-=0.5");
  5. I'm wanting to be able to destroy a timeline (based on resizing). When i destroy the timeline, i want to remove all of it's initial set-up CSS. Here is how a timeline is set-up: var scene = new TimelineLite(); scene .add("start", 0); scene .from(panel, 20, { opacity: 0 }, "start") .from(panelText, 20, { y: "+=60px" }, "start") .from(background, 20, { scale: "1.15" }, "start") With this, the panel is set to Opacity 0 initially. I have timelines within timelines as each panel (17 of them) animate in various combinations. I don't want the timeline active on mobile so i can disable it, but is there a method like clearProps for removing all CSS generated by all the timelines? Or must this be done outside of GSAP? The codepen attached (i got from the closest post i could find relating to this issue) demonstrates it resetting to the start, but the elements still have their CSS properties.
  6. Hey, I'm struggling with a callback and clearProps, I've tried few options (found here : https://greensock.com/forums/topic/7299-timelinemax-reverse-callback-problem/) and none of the solutions works, I'm probably missing something or I don't get it. navAnim.reverse(-1).timeScale(1.2).eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"})); Doesn't work navAnim.eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"})) navAnim.reverse(-1).timeScale(1.2); Doesn't work function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } navAnim.eventCallback("onReverseComplete", removeProps()); navAnim.reverse(-1).timeScale(1.2); Doesn't work navAnim.set(mainNav, {clearProps:"all"}); Works but no animation (which is logic), so it's not that clearProps doesn't work but the callBack; navAnim.tweenTo(0, {onComplete: navAnim.set(mainNav, {clearProps:"all"})}); navAnim.reverse(-1).timeScale(1.2); Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } navAnim.tweenTo(0, {onComplete: removeProps()}); navAnim.reverse(-1).timeScale(1.2); Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function TweenLite.delayedCall(navAnim.time(), navAnim.set(mainNav, {clearProps:"all"})); navAnim.reverse(-1).timeScale(1.2); Doesn't work function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } TweenLite.delayedCall(navAnim.time(), removeProps()); navAnim.reverse(-1).timeScale(1.2); Doesn't work Thanks
  7. 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!
  8. Hello, The code : http://codepen.io/hemels/pen/WQGqLB I'm working on project with draggable and works perfect, BUT i cant get one thing working. After you drag a div over a grid of divs the draggable div is append to the cell from the grid. This works fine. But when you drag the div for the second time, the div has to be 'de'-preppend (works) only its on the wrong position. I guess its the transform that needs to be reset. But what ever i try i cant get the result i want. There must be a simple sollution somehow, but after 2 hours of try and error i ask... Thanks for the great software and the support ! gr Mels
  9. Hi, Is it possible to animate to the original value? I tried using clearProps, but that just resets it immediately.
  10. I came across an unexpected behaviour: apparently Chrome 36 and up supports both prefixed and unprefixed 'transform' property. So, if you set initial transform values on an element (not with GSAP) like so: someElement { -webkit-transform:rotate(30deg); transform:rotate(30deg) } and do TweenMax.set(someElement, {clearProps: 'transforms'}) only the unprefixed version is being cleared and the rotation remains on the element.
  11. Dear GSAP and fellow GSAP users. Although I found a workaround, as I expand my usage of your api, I thought it might be useful for me, and maybe others, to create a discussion based on what I encountered I've added a codepen as this is good practice, but it's a completely stripped down version of what is actually happening, as it is not possible to include everything, and what I'm after, seems to me to be something fairly straight forward. Scenario I have a timeline (small snippet in codepen) that simply animates some text, but which includes calls (removed from codepen) to external (unconnected to the animation) functionality. The timeline works great, and all the controls I've included do exactly as expected - accept that what I want to happen is when a user pauses the anim, the text acts gracefully and moves back to the starting position (css only, not timeline), as I don't want the text just to be stuck mid flow. I handle the external calls perfectly and the paused state is fine, all I want is the css side to be cleared. Ok so I tried the clearProps:transform || all etc (via a set command, and injected at different time points**), I also removed props/data/attr etc etc, but the transform on the text resolutely remains, if the timeline is either playing or paused. If I clear first, then clearProps works. For completeness, I tried killing the current tween (which I don't want,but as a test), didn't do anything. I tried using the timelinemax calls to get current/before/after labels, but since this moves the play head, but not the external function calls, I cannot use this. **Now I've read conflicting posts that say it is possible to use clearProps on working timelines as GSAP doesn't force continual transforms, and others that say it is not supposed to work in that way. I believe the default is for overwrite between tweens so wouldn't this allow another tween to take precedence? I'm pretty sure a tween is added to the end of the stack, as per api and probably explains what I'm seeing. I used $('.key-shortcuts').children().removeAttr("style"), which seems a rather blunt force approach, as it clears all styling, whether GSAP related or not. (but then looking at the code I think clearprops does the same?) Based on my scenario what would be the GSAP way to clear (or manipulate) the added css in a working timeline paused or otherwise? One final question, I quite often want to base one tween in relation to a previous label, but also want to label that very same tween. e.g. t1.to(some el,1,{some css},"label1+=1","but also be labeled itself?"); Is that possible? Btw, GSAP is just great, I had used it before mainly for the performance boost, standalone or as a jquery override, but for some reason I missed the timeline aspects. It's brilliant, I've already started removing the hugely ugly jquery way Thanks in advance
  12. I stumbled upon a weird behaviour of clearProps, and couldn't find any reference to whether it is a bug or not. When using clearProps with explicit values the order of the parameters passed has importance when clearing mixed transforms/properties values. This will clear x and y and skip opacity - clearProps:'x, y, opacity' This will clear only "opacity" and skip x and y. clearProps: 'opacity, x, y' Same goes with other non transform values like "clip" See the codepen for clearer example.
  13. Hello all... i had a couple questions about clear and kill methods: What is the difference between using clear(), versus one of the kill methods and/or clearProps? Is the clear() method faster, and just clears a timeline? ...versus using one of the kill methods, or clearProps on a individual basis? Also is clear() better than using killAll()? thanks ahead of time for any clarification?
×