Jump to content

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


  • 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


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. ..I would expect it would return the new value and not the pretween value. Please reffer to the codepen example. I am either missing something vey simple or very complex and surely nothing in beTween. Thanks lads
  2. So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly appreciated. Maybe you can see what I'm going for. Sorry if it's a cluster****. It's been a messier process than usual. website.zip
  3. I've seen a lot of posts about media queries and running animations on screen size, but I haven't seen any that I can use for my problem. My problem is that between the mobile/tablet and desktop versions, the original logo is a different percentage size and is scaled down to a different size. Forgive my code. It's a little sloppy at the moment. But as you can see, on the desktop version, the original img width is 50%, and on mobile/tablet, it's 90%, so the post-animation sizes will be different as well. Can anyone help with this? Thank you.
  4. Hi guys, I am having an odd issue. I am using the splitText plugin successfully and the animation works perfectly on all tested browsers and devices except the Samsung Galaxy Tab 2/3 (!?) The odd thing is that it only happens on the second text instance animating in ("txt2"). All other instances animate as expected... I can't figure out why the line break in the "txt2"instance is being ignored on Samsung Galaxy Tab2/3 only?? Any ideas? Thanks!
  5. tl;dr: TweenMax + Safari can't read the value of perspectiveOrigin, can set it just fine. Hi, happy customer and big fan here. I'm working on a project where I'm trying to tween the perspective-origin CSS property. It works just fine as long as I TweenMax.set() it, but it breaks in Safari when I change it to TweenMax.to(). Both scenarios work in Chrome. It looks like TweenMax is unable to READ the property's current value when in Safari, which it needs for calculating the tween. It is able to WRITE the value though. If you take a look at my Codepen, switch the method to "to", move the mouse and then hold still for a bit you'll see that the value gets set to the tween's end value as soon as the tween ends. Which is also why TweenMax.set() works just fine, because it doesn't need to read a value, only set it. Any idea how I can get around this without manually checking for browsers and juggling with vendor prefixes? Thanks a bunch, Franz
  6. I am trying out the gsap animation library. According to the basic docs the syntax for getting a tween up and running is: TweenLite.to( [target object], [duration in seconds], [destination values] ) So I have tried a really simple tween based on jQuery's hover event: $('.contact-item').hover(function(){ TweenLite.to(this,4,{background:'#671B4B'}); },function(){ TweenLite.to(this,4,{background:'#FFFFFF'}); }); Oddly, the background does change to the correct color, but it tweens instantly instead of over the course of 4 seconds as I have specified in the second argument. I did check to make sure the default is seconds not milliseconds. It's in the docs I linked to. I did make sure I am using TweenLite and not TweenMax. I am using jQuery but see no conflicts or errors in the console. Any help is appreciated. I have linked to a codepen I have added the css plugin and it is added to the codepen as well.
  7. Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends. Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help. When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation). Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.
  8. Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.
  9. Hey all, I've got a lovely animation up and running for the site I'm working on, but I would like the mobile animation to run slightly differently. Specifically, I've got a Tween that looks something like this: TweenLite.to(target, 1, { "top": 0 }); Pretty basic stuff. What I'd really like to do is replace "top" with some variable, such as orientation, declared earlier in the code depending on what device and screen size the user is using. That way, I can change the animation slightly based on the users' device/screen size. I'd like to do this in one Tween if possible, because the actual tween itself is much longer, and I love keeping my code as simple and elegant as possible. So that super simple Tween becomes: TweenLite.to(target, 1, { orientation: 0 }); where orientation gets declared some time earlier. Is this possible? I've messed around with declaring it a few different ways, but none of them have worked. Apologies if this is an easy fix that I've been missing, but I've been messing around with this for a while now and haven't found a solution. Thanks in advance!
  10. Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you
  11. Hi all, I've encountered a strange situation: when an item whose css position is set to 'fixed' is placed within another div that has been scaled using TweenMax, the fixed item is no longer fixed. Any ideas?... Thanks for the great work ! Elior
  12. hello, thanks for this awesome GSAP i have one question, a simple code as below var tl = new TimelineLite(); TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100}); tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2); tl.play(); staggerFrom seem better for my code but i cant get it work, i will try again late so now i set the $a property by TweenMax first. if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too? e.g set translate, opacity, z-index, scale etc any different between set property from css / TweenMax? which one is better? sorry for my language skill, thanks so much
  13. Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });
  14. andyr

    fromTo, left, right

    TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0}); The aim is to animate top-left to top-right of browser window. In the above, the 'left' property is still being read in the 'to', so it stays top-left. So I tried overriding 'left' with left: "auto": TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0, left: "auto"}); That sets 'left' back to default, but it doesn't animate from the left: 0 specified in the 'from'. Any ideas? Edit : Although I could do this: {top: 0, left: "100%", xPercent: -100, yPercent: 0});
  15. I've got a box in the middle of the screen: .box {width: 20em;height; 20em;z-index: 10000;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);background-color: #fff;box-shadow: 4px 4px 80px #000}; When I resize the browser window, the box stays centered. However, when I add a tweenMax.from, to slide the box from a corner of the screen. var tl = new TimelineMax(); tween = TweenMax.from('.box', 2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0}); tl.add(tween); The animation is fine, but when I shrink the browser window, the box doesn't stay centered. Instead, the box just remains in the same position. Any ideas? Thanks
  16. 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?
  17. 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
  18. 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.
  19. 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>
  20. I've been using clip property to create rectangular masks. TweenMax.to(element, 0.5, { // rect(top, right, bottom, left) clip:"rect(0px,150px,150px,0px)" }); I've read that the css clip property is deprecated. Will GSAP be able to poly-fill the clip property to make it compatible with browsers that have dropped support for clip?
  21. 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.
  22. 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.
  23. When you animate the width of an element expressed as a percentage fractions with zeros to the right, the animation is not performed correctly.
  24. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. There are some interesting (and surprising) performance implications of using CSS animations that aren't widely known. I stumbled across a few of them while running tests for a customer in the advertising industry who is pushing to have GSAP adopted as the standard, so I recorded a screencast explaining what I found. I figured it was worth sharing: Summary Timeline recordings in Chrome Dev Tools don't show the overhead involved with CSS animation of transforms, so people often misinterpret the [lack of] data. Recordings look "clean" with CSS and "dirty" with JS which leads to faulty conclusions about performance. CSS animations of transforms used twice as much CPU compared to JS according to Chrome's task manager. CSS animations caused the main thread to bog down more than using JavaScript animations. User interaction is typically handled on the main thread, making things feel sluggish to the user. It is especially costly if you animate transforms along with almost any other property at the same time. Webkit browsers have synchronization problems. JavaScript was faster than CSS animations on every device that I ran this test on – the only exception was animating transforms in Webkit browsers (and then there's that heavy cost on the main thread and sync problems). In order to independently control the timing/easing of transform components (rotation, scale, skew, position) in CSS, you must create a DOM node for each which negatively impacts performance. With JavaScript, no such workarounds are necessary. (see note below) I love Dev Tools - I'm not knocking it at all. These things are just tough to measure. Do your own tests! Don't put too much faith in Dev Tools or my tests. Use your eyes because ultimately perception is what matters to end users. Smooth movement and responsive UI are both important. Links Raw Codepen test Google's Paul Lewis addresses CSS vs. JS Animations A great article about hardware accelerated CSS by Ariya Hidayat Why GSAP? - a practical developer's guide UPDATE: After recording the video, I did some more tests that showed that one of the biggest contributors to the slowdowns in the pure CSS version was the fact that multiple elements had to be nested in order to accomplish the independent transform component controls. In other words, staggering the start/end times (or easing) of rotation, scale, and position is practically impossible in pure CSS unless you nest things like that, but there's a relatively significant performance tradeoff. When nesting could be avoided, pure CSS animation of only transforms did appear smoother on webkit browsers under heavy pressure and it was basically indistinguishable from optimized JS animations under all other levels of pressure.
  25. 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.