Jump to content
GreenSock

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

Search the Community

Showing results for tags 'css'.

  • 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

  1. Is there a way to override properties set by GSAP when tweening a className? Here's a demo where I initially set my boxes to a height of 50. I then tween them to a class that has a height of 150, but the height won't change unless I use clearProps. However, I really don't want to clear any props and you can't animate the clearing of props.
  2. Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
  3. Hi there, first of all, wow!! GSAP is very impressive. I have the following code to animate the transform of an element: TweenLite.to(".element", transitionSpeed, { ease: Power2.easeInOut, css:{ transform: "scale("+scaleDiff+") rotate("+angle+"deg) translateX("+left+"px) translateY("+top+"px)" }}); Everything works as expected, except that the rotation is in the wrong direction. Can you give me a hint on how to change the direction of the rotation without loosing the transform property?
  4. I'm coding an accordion and I'd like to tween the height of a submenu so that it grows from 0px to whatever is it's natural height. I've found that GSAP doesn't tween values between 0 and 100% or auto. Apart from having a variable record the final size and pass that to the tween, is there a more GSAP oriented way of solving this? TIA
  5. This is supposed to be a sidebar that pushes the entire page when clicked, but the clip animation is not working the way it should. Help? Using Google Chrome.
  6. Hello! 1) div moves to 200 pixels to the right and takes the position 300px - it's ok 2) and next div moves to 50 pixels to the left - why? I thought it was specified the absolute position (left:50px) And how I can move the block to the absolute position (left:50px) at the second tween (if the first tween use "x:..." ) var logo = document.getElementById("elem"); new TweenMax(logo, 2, {x:200}); new TweenMax(logo, 2, {css:{left:"50px"}}).delay(2); ...... <div style="left: 100px; top: 100px; position:absolute;" id="elem">blablabla</div>
  7. https://dl.dropboxusercontent.com/u/34687130/work/kynan/tiles/index.html On Safari (or iOS Safari) notice how one tile is over the top of another when it shouldn't be. When I disable perspective, this issue does not occur. I have tried changing the zindex at the correct place, as well as the Z 3D property. Nothing seems to work. Is this a known issue? Thanks.
  8. Using TimelineMax and TweenMax, when doing a zero duration tween to adjust an object's visibility at a point on a timeline, the visibility is toggled immediately instead of in sequence. Example var text = some text object var img = some image object img.css('visibility','hidden') var tl = new TimelineMax() tl.to(text,3,{left:500}) tl.to(img,0,{visibility:'visible'}) tl.from(img,3,{left:500}) The image object will be visible at the start of the timeline animation, instead of after the text object animation. Although it works if you do: tl.to(img,0.001,{visibility:'visible'})
  9. When you animate the width of an element expressed as a percentage fractions with zeros to the right, the animation is not performed correctly.
  10. I have an odd issue. I've created a simple rotation as follows: <div id="wish"> <p>Make a wish.<br> Write it down.<br> Tie it to the tree.</p> </div> I've added backfaceVisibility:"hidden" to the contained 'p' tag which works. When I add a pseudo element div#wish the backface visibility on the p tag fails and the pseudo element flickers badly during animation. Can anyone shed any light on this? I've been trying to solve it for nearly 2 hours! Thanks.
  11. 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.
  12. 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
  13. Hi there, I am using the Quart.easeOut easing on all my animations. On some parts of my website, I would like to use the same easing but using CSS. How can I find the bezier function of Quart.easeOut?
  14. Can't i use translate3d in my tweens? I see x and y for translate, but no translate3d!
  15. Hi, I'm looking at animating an Absolutely positioned (in the center) to specific percentage on the left-margin. I can get it to work as long as the marginLeft isn't set before hand other than in the CSS, but when the element has that left-margin style inline and then I tween to say 4%, it jumps all the way to the left and then moves the 4%. I have a codepen setup, if you comment out the marginLeft and marginRight and only have that set in the CSS it works correctly. Am I thinking about margins (and absolutely positioned elements) incorrectly? http://codepen.io/kaplan/pen/rmKzG Thanks, Dave
  16. I just recently discovered GSAP and have been so impressed by how powerful and intuitive it is. I'm wondering if anyone knows of a Javascript solution that does for CSS layout what GSAP does for CSS animation? I know this isn't considered good practice to manage layout with Javascript, but I'm just wondering if there are any good options out there. Thank you!
  17. Hey guys. I'm doing a simple tween on a score bar which tweens the width of a div from 0% to 0-100% depending on the users score in a game. I want to play a sound when the bar animates and passes various points. I'm struggling to get the % value back out of my tween instance during the onUpdate callback. tween.target is an array containing my div. I can call: onUpdate: function() { # get a numeric percentage value val = parseFloat(this.target[0].style.width) if(val > 0 && !played_one) { soundManager.play('sfx','score_1'); played_one = true; } else if(val > 50&& !played_two) { soundManager.play('sfx','score_2'); played_two = true; } else if(val > 90 && !played_three) { soundManager.play('sfx','score_3') played_three = true; } } This solution isn't the most elegant I know. But something really doesn't feel right about "this.target[0].style.width" I'm not 100% that this is going to give me the current percentage value correctly in all browsers. I thought there might be a GSAP to give me this value reliably.
  18. Hi all I don't have any code for my question about css pseudo-class usage. I'd like to build ::after and ::before with set() and i failed. So in my wishes i'd like to make a cool animation with ::after ans ::before and I'm afraid to fail again. I saw a tuto on GreenStock which speak about CSSRulePlugin (here) but I don't know if this plugin is in the TweenMax.min.js file that I utilise to be sure to have the max of possibility. hummm I think i'm a little bit lost thank you for your help
  19. BigSmalls

    margin auto

    Help plz. Inner block jumps to a horizontal alignment without animating itself there. Initially I was running both animations simultaneously and so I thought that perhaps the inner block may not know the horizontal dimensions to calculate margin auto if the outer block is animating its 'left' attribute, but it turns out that the animation doesn't work even after the outer block finished animating. Thanks for the help!
  20. Has anyone done any work with Greensock 3D transforms to create dynamic perspective shadows with CSS3? I was thinking this morning that it would most likely not be that difficult, but my 3D math/trigonometry skills are somewhat dormant. What I mean is shadows that will fall on a flat horizontal plane ("the ground") behind the object, as at sunset, and will, as the object moves in x and z directions (not y, as that seems complicated). The shadows would respond to a central light point (perhaps the center of the screen) Something like this image — Thanks for any way forward —
  21. hi! I'm doing something a bit like this; TweenMax.to(element, 0.3, {className:'+=over'}); where the .over class has different colour, position etc, but also different background-position. My problem is, i'd like the background-position to not tween, while the rest of the properties do. is there a way to add an exception to the tween? Any ideas? thanks, Andy
  22. Hi I'm playing with some "clip" animations right now, and find myself calculate way too many hardcoded values. [Edit: this functionality exist, I still wish for the array option] I think that an addition of relative values to clip:rect() will add a lot of flexibility. Also, allowing clip to receive an array of values instead of the CSS syntax rect(a,b,c,d) could help ease development too. something like so: // set initial clip:rect(0, 100px, 100px, 0) as required by CSS TweenMax.set(element, {clip: [0, 100, 100, 0]}) // tween from clip:rect(50px, 80px, 100px, 0) TweenMax.from(element, {clip: ['+=50', '-=20', '+=0', '+=0']}))
  23. So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.
  24. I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
  25. I am trying to animate back and forth between two css classes and I'm having some issues right now I have two classes "contracted" and "expanded: .button{ border: 5px #000 solid; } .contracted{ width:100px; height:100px; background-color:green; } .expanded { width:200px; height:200px; background-color:red; } And im trying to switch between them with: $( ".button" ).click(function() { TweenMax.to(".contracted",2,{css:{className:"+=expanded"}}).set(".contracted",{delay:5,css:{className:"-=contracted"}}); TweenMax.to(".expanded",2,{css:{className:"+=contracted"}}).set(".expanded",{delay:5,css:{className:"-=expanded"}}); }); http://codepen.io/anon/pen/vzayE And it will tween from "contracted" to "expanded"... but not vice-versa... Is there a proper way to switch classes?
×