Search the Community

Hello team , i'm trying to achieve e 3d cube rotation using gsap v3 tween methods, in this demo i'm rotating a cube by applying 3d css properties to the element. t1.current = gsap.timeline({paused : true}); t1.current.add(gsap.to(["#scene01","#scene02"],{ transformPerspective: 450 , transformStyle: "preserve-3d", backfaceVisibility: "hidden", transformOrigin: `50% 50% -${450 / 2}`, duration:0.000001 }),0) t1.current.add(gsap.to("#scene01",{ rotationY: -90,opacity :0.5, duration: 0.8 }),0); t1.current.add(gsap.fromTo("#scene02",{rotationY:90},{ rotationY: 0, duration: 0.8, onComplete: () => gsap.set("#scene02", {clearProps: "transformPerspective,transformOrigin"}) }),0); t1.current.play() by the end of "#scene02" i clear the transformPerspective,transformOrigin props using clearProps, if i try to seek to the time 0.2 "#scene02" looses its 3d perspective and showing a 2d rotation, clearing the props is crucial to business logic. Anyway i'm clearing the 3d css properties for scene-2 only in the onComplete callBack, by the duration of 0.2 , scene02 should still has its 3d css properties right. if not what is the solution for it.

Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex

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.

Hello, I want to clearProps when iI scrollBack and when my reverse function animation is over to make my links not loosing their hover property. That's because my nav has two different opacity level: The active link is by default on 1, and the other links are by default on 0.3 and when I hover them they go on 0.5 for example. But after making the animation with gsap to hide them, on reverse the get inline styles from gsap that make my default hover not working anymore. Sorry but I'm new with gsap and I couldn't set a valid codepen using gsap3. In my app it works but not on these pen. Thanks a lot for your help

Just moved to GSAP 3.2 from TweenMax 2.latest and noticed this warning. Does not happen with TweenMax.set equivalent. For code gsap.set("#nb", {top: "200px"}); //... //... gsap.set("#nb", {clearprops: "top", bottom: "58px"}); I get a warning in 3.2.6, but things continue to work well. Invalid property clearprops set to top Missing plugin? gsap.registerPlugin() Here is the full log demo.localhost-1588964285633.log PS: #nb { position: absolute; padding-top: 8px; white-space: normal; /* needed for edge because edge doesn't understand break-spaces */ white-space: break-spaces; font-size: 16px; width: 100%; left: 0%; line-height: 1.3; }

Hi I'm very new to gsap and I was trying to make a hover animation for my buttons. But I would like the button to return to his start position. I tried to use clearProps, but that doesn't seem to do the trick. Hope someone can help!

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.

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!

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.

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");

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

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!

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

Hi, Is it possible to animate to the original value? I tried using clearProps, but that just resets it immediately.

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.

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

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.

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?