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'm trying to make a line appear my text which starts from width: 0 and expands to the width of the text. The way it works currently is it starts from the left (width: 0) and expands all the way to the right (width: 100%). The way i want it to work is: It starts from the center and expands to the left and to the right until it reaches width of text. How can you do this?
  2. I am working on a webpage where I use ScrollMagic and GSAP for animations. I usually work on one general layout and then refine it for different screen sizes. I just divided my css by media query so I can target different screen sizes and all my animations stopped working!? The CSS is the same- the only difference is whether it is just one style or the same style divided by query. Do you know the reason for this happening?
  3. I am working on this map (not sure why the animation itself is not working on the Codepen). I made it on a 27in monitor and on a big screen it works fine. However, when I started working on the stylesheet for smaller screens I realised that this map on a typical 13in Mac laptop (1280x800) I realised that I have a bit of a white border at the bottom because the monitor is of different proportions to my image. Is there a way of stretching the SVG to cover the full height of the DIV? I tried adjusting many different parameters but none of them seem to do anything. I also noticed that adjusting padding-bottom on <div class="svg-container" style="padding-bottom: 58%;"> does not do anything to the size of the image!?
  4. Hi, I am trying to slide two lines in a campaign (one line in one frame and the second in the second frame). I want the second line to follow the first line after few seconds. I am able to slide in and slide out the first line but when I add the second line in the code, the code does not work. Can anyone help me out in this. Here is the link to the jsfiddle: https://jsfiddle.net/5pq750ko/ (If you remove line 4 and 5 from the JS code, you will see the code working. But when I will add the lines back, the code stops working) Thanks
  5. Hi, I am new to greensock and I need little help with it. I am trying to reveal few words (2-3 words in a line) as the ball rolls across the x-axis. Is there a way to do that? In my code, the ball rolls till then end and then displays the text, but I want the text to be displayed as the ball moves across. Codepen link: http://codepen.io/anon/pen/pROjra http://codepen.io/anon/pen/pROjra Thanks
  6. If i have set transform either with css og TweenMax.set - e.g. transform: translateZ(100px); can I add other transform translates/rotations/etc. and keeping the translateZ?
  7. Hi guys, Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute? I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly. className: '-=responsive-example_small' This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation. I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain. Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')? If not, is it a possibility for the future? Thanks a lot!
  8. FAKS

    GSAP vs CSS

    Hi everyone, I wanted to reply this post -> http://greensock.com/css-performance But I don't know why I can't leave a message, even if I'm logged in... So I'll share my opinion here I'm working on a game webapp (HTML5/CSS/JS), running on desktop browsers, smartphone, tablet and also into a native IOS app (webview) built with Cordova. In this webapp, like in every games, there is of course transitions between pages, popup and dialog apparition, drag and drop functions, etc... there is also transitions/animations on elements such as div, svg, png from the DOM during the game. During my development process, I was looking for the best way to animate those elements to get the best visual effect during transitions, tween, bouncing effect, apparition effect, etc. I was focusing on this idea "the user should NOT see the difference between my webapp and a real native app". I wanted every transitions/animations look smooth and great. I know GSAP since 2010 so this was my first idea. GSAP is really the most convenient JS library that I know to animate. I have nothing to say on that point. But, during my test on different devices, I noticed that large transitions such as fade on the entire screen, dialog and popup bouncing, opacity apparition was laggy on smartphone and tablet (on desktop browser it was great). So I did some research and test. After reading lot of post about CSS vs JS I tried by myself to recode all those laggy transitions only with CSS rules. The result was surprising because those new transitions was great, no lag, very fluid, better than with GSAP. Then I found this article -> http://greensock.com/css-performance I tried the CodePen linked -> http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/ On my laptop I can't see any difference (I'm not talking about pure performance and FPS benchmark, I'm only talking about visual feeling, looking for something fluid, without lag). But did you try this CodePen on tablet and smartphone? The difference is huge. CSS transitions look really better, fluid without any lag during transition. I did test on iPad Pro, iPad Air, iPad 3, iPhone 5, iPhone 6... Each times I set the Quantity at 2000 and I can see a huge difference. CSS looks much better. Of course coding complex animation with pure CSS rules is awful, so if I could get the same result with GSAP I'll use it for sure. And you guys? Did you encountered the same issue with smartphone and tablet? Any opinion or comment are welcome! Thanks!
  9. Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?
  10. Hey guys I am Justin, first post here. The community over here seems to know there stuff so hopefully you can solve my problem with making tabs in GSAP I am making this website like eBay, but much smaller scale. The top of the site is broken into three tabs. Browse / My Hub / Sell. If the user is in the browse tab he will be searching listings (this is also the default tab on the home page) If the user is in My Hub he will be looking at account information and watchlist... If the user is in sell he will be selling things ect. I can do simple tabs no worries but I need help with advanced tabs. Each tab will have lots of links and links within links ect. But I want the tabs to act just like the tabs do in chrome, so the user can go to all different places in each tabbed section of the site and the other tabs will be right how they were... This is so users can be browsing and decide to add funds, sell something, look at there account, update details.... they can then go back to where they were browsing. Maybe I can use browser cache for the other two tabs that are not used each time the used tab page loads. I would almost want it so the user could upload photos in the sell tab wile browsing listings in the sell tab. I don't know if it can be done, but I am looking forward to any advice/basic codepen.
  11. I want to try to use greensock animations in the UI. What css framework it is better to use? I understand that this is a strange question, but perhaps there are recommendations. Foundation, Bootstrap, Skeleton or something else?
  12. If i repeat timeline comand tl.from(head, 0.5, {left:100}); it will repeat objects movement stating from position defined in css. Is it possible to move same object several times from previous position? So instead of tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:200}); - 100px tl.from(head, 0.5, {left:300}); - 100px it would be tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px
  13. Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either). I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox. The structure of the object is as follows: <div class="banner"> <div class="border"></div> </div> The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized. I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!
  14. Hi, Has anyone come across this before where an svg element that's been animated with CSS animation and has the animation-fill-mode: forwards applied to it means that GSAP can't animate that element's property? What I'm trying to achieve is an animated preloader that animates in via css animation, so that it's lightweight and GSAP doesn't have to load in the document head, but when the app fully loads GSAP is used to animate it out with a more complex animation. However… In the codepen example used, the marker is initially positioned outside it's native svg position, then after 0.5 sec it animates back to its native position. However to get the marker to remain in that position at the end of the animation it requires 'animation-fill-mode: forwards' otherwise it jumps back down. I've added a basic GSAP tween to simulate a window.load function by just adding a 2 second delay, to animate it up after the css animation has finished, but it doesn't animate due to this css property being added. You can see the console is logging out at the end of the 'non moving' GSAP animation. Any ideas folks? Or do I deserve a banana award today for being dim? I am very tired today Cheers, Pete.
  15. ESPN is hiring! If you're a front end developer looking for a part time gig (29hrs) please apply in the link below! https://jobs.espncareers.com/job/bristol/part-time-senior-front-end-editorial-developer/5216/3059914
  16. Hi all I'm encountering some jittery animation on chrome while animating the scale of a div using TweenMax (as well as other tween engines). In the codepen, the div with the image is encapsulated inside other divs in order to reproduce the conditions of the project I'm working on. I also put a css animation counterpart that doesn't have that jittery effect. I'm wondering why it is only happening with js tweening engines... I'm only seeing it on chrome (win & mac), it works nice on ff and safari (haven't tried edge yet). Except on ff mac, I get the jittery effect when i'm hovering the div. Do you also have that problem ? Is there a workaround ? I tried the "z" attribute and also put a translate3d on the parent. Thanks. Thomas.
  17. Hi there! I'm new in the GSAP world but already loving it! Today, I'm trying to replicate a loader animation that I found on loader.io. The problem is that it provides either a CSS animation or an animated (SMIL) SVG (which is bound to be obsolete). That's why I tried, in order to be better at tweening, to replicate the effect using the base SVG minus the animations. The effect I'm looking for is a seamless loop: when the first ripple is a 50% of the animation, the second one should start and when the second one is at 50%, the first one should start again... You get the idea I tried with two timelines but my brain can't seem to process the delays and duration needed to achieve the effect, let alone the easings... Thanks in advance to anyone willing to assist a noob in understanding the intricacies of the GSAP world
  18. mockingbird


    Hi Guys totally new here, just signed up. I am looking for a starting point (document) link to get me started in using this in WordPress.
  19. Dear All, i have seen this tutorial where the animation can be controled by the input value of a slider. http://greensock.com/sequence-video I have a variable definde in my code which has a value between 0 and 1. Is it possible to control the progress for the animation with the value from this variable?
  20. First of all, you can find a simplified demo of my code in this JSFiddle. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project. I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations. This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters: nextOrPrev, that runs one animation or another based on the value provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev"animation, not yet used, just emits an alert("prev"). bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap. In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu. This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it? Thanks for any help.
  21. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { font-family: "Helvetica Neue", Helvetica; width: 90%; font-weight: 200; letter-spacing: 1px; margin: 25px auto 0 auto; background: rgb(234, 235, 235); color: rgb(25, 25, 25); } div, p { margin: 0 auto; } p { color: rgb(125, 125, 125); font-size: 0.85rem; text-align: center; margin-bottom: 17px; } div { width: 35%; overflow: hidden; } </style> <script type="text/javascript" src="./TweenMax.min.js"></script> </head> <body> <p> Refresh this page to re-run the demo. </p> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </div> <script type="text/javascript"> TweenMax.to("div", 1, { opacity: 0.5, width: "*=2", ease: Power1.easeInOut }); </script> </body> </html> above is the code i wrote,i want the width of my div move to 70%,and it does not work. But if i write:width:"+=300",it will work ,I don't know if i can write an expression in the tweenMax?my English is not very good, i hope someone can answer this for me!
  22. Hi guys! I want to share my work on how to make a venetian effect using GSAP I hope it will help other guys on their animation! You can freely fork this project on codepen! thanks! Any feedback and improvements are welcome! Codepen Link: http://codepen.io/Waren_Gonzaga/pen/akywzY Big thanks to Jonathan and Jack of GreenSock for guiding me here! Pretty new here!
  23. HI everyone! I am being active here! I made a simple game using GSAP I know it is possible but it is really hard to code a game using GSAP alone.. can you guys which part of gsap I am going to use if I want to make an awesome game using GSAP! Pen Link: http://codepen.io/Waren_Gonzaga/pen/dMpjMy Thanks heroes!
  24. Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
  25. Hi everyone, I recreated a codepen that replicate more or less my problem (for using that click somewhere in the white area) I'm trying to achieve something like the one you can see. I need to open a "fixed popup" that everytime change it's initial position. If you try the pen everything works fine for the only first click but if you try to click again you can see that the "modal" still opening from the position you clicked the first time. Can anyone explain whats is going on? ps: I added a delay so you can see clearly what's is going on. Thanks eveyone!