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. mockingbird

    Help

    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.
  2. 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?
  3. 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.
  4. <!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!
  5. 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!
  6. 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/
  7. 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!
  8. Hey again Greensock guys , I've got a brainteaser for y'all, hopefully it's an easy one. I did do a search around before asking, but the forum search won't include the word 'border' as a keyword, it's restricted, and Google only answered so much of what I needed to know. Okay, so I'm trying to recreate this pen from CSS to JS (GSAP): http://codepen.io/joelrodelo/pen/uHjvi Assumed it would be simple enough but it's proving trickier than I thought. I've been trying to do it with an image on a page, have a quick sample here for reference (you can thank me for the working image later ) : http://webslinger.com.au/dev/gs_border_animation/index.html Some of my attempts or JS fiddles are still in the scripts.js page, just commented out, but they're there for reference. I've just been starting with the left side of the image to begin with. The problem I run in to is that the border appears from the outside in, and any method I've tried to have the border appear from any other direction - either by 'y:' or 'height:' - has failed, moved the entire image with it, or nothing's happened at all (you can see some of my other attempts in the js file). I figured the most logical thing to do would be to nest it, to create a new Tween variable that adds the className and then animate the variable in a new TweenMax line, but I think I've gone wrong somewhere with that approach (read back through the documentation, can we only nest new Timeline's, not new TweenMax's?). Anyway, maybe someone's already figured out an approach to this and I've missed it, or maybe the solution's just too obvious for me to see, cause' surely it wouldn't come to having to actually draw a border line around the image would it? Appreciate any feedback in advance.
  9. Hello everybody I am getting frustrated a lot. How to get this boxshadow look without darker lines/ stripes? The box shadow looks darker than the rest of the background or the inner picture rectangle while having the same colors. I don't understand this. In Photoshop this looks good. Using CSS it is so ugly! =( Please help me! Kind regards, Matt
  10. Hey guys, I have a dynamic template, where you can input css into the XML feed, and the banner will read that on run time and adjust the banner overwrite the styles using set: TweenMax.set(element, newValuesObject); And I've managed to cobble together bits of string replaces and RegEx: var myDynamicCSS = "color:#ffffff; background-color: #00ffbb; text-align: left; border: 1px solid green"; String.prototype.toCamelCase = function() { return this.replace(/^([A-Z])|[\s-](\w)/g, function(match, p1, p2, offset) { if (p2) return p2.toUpperCase(); return p1.toLowerCase(); }); }; const convertCSS2JS = (css) => { let frameCSS = css.replace(/([\w-.]+)\s*[^;]+);?/g, '$1:$2,'); frameCSS = frameCSS.replace(/,+$/, ''); let properties = frameCSS.split(', '); let frameCSSObj = {}; properties.forEach(function(property) { let cssProp = property.split(':'); let cssKey = cssProp[0].toCamelCase(); let cssValue = cssProp[1].trim(); frameCSSObj[cssKey] = cssValue; }); return frameCSSObj }; TweenMax.set(myDynamicElement, convertCSS2JS(myDynamicCSS])); But I'm unsure of how easily breakable this is? Codepen: http://codepen.io/joemidi/pen/GZVedX
  11. squxd

    SVG Hover Animation

    1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the correct placement within the file. (I have tried 'cropping' the SVG of "X" and "A" but the position/location is off. Question: - can I set a rotation orgin point manually? or do you think I should even be using more JS/GSAP to accomplish these effects? *There are actually even more interactions I have thought up - however they can wait until this problem is resolved, Thanks for ANY & ALL help! (I haven't found many examples of SVG hover animations)
  12. Hey all, Long time Greensock user (since as2, love you guys! edit: lol, according to my profile since 1901) but this time i need a little help. Im basically looking for a internal Greensock function (or one that's external and does what i need) but i cant find it in code or docs. Let me hash out a bit, im working on a little framework for a '1Pager' site (you know, those silly sites that let you just scroll for more stuff as the entire thing animates all over the place) and im in need of a function that can take two css styles, a start and end, and then pick a point between them. For example, see the below pseudo code: var start = 0; var end = 100; var position = 0.5; var result = myMagicalFunction(start, end, position); // result = 50 So im looking for a function that i can feed 2 variables, and then i get a variable between those 2 variables, based on a 'position'. Obviously for the above example this is dead simple to do, but what i need is something like this that works for css variables, so for example the below: var start = "0%"; var end = "100%"; var position = 0.5; var result = myMagicalFunction(start, end, position); // result = "50%" And thats still a pretty basic example, it should also work with things like colors, css transforms, etc. So what i was hoping to be able to do is use some internal TweenMax function to get said values, is such a function available? If its not, does anybody have a function like this? that can handle a load of css values? Kinda started writing a function for it myself, but its a pretty hefty task, and feeling like im doing needless work, since one way or another TweenMax already has this ability, im just stumped how to use it. Any help very much appreciated!!
  13. I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!
  14. Hi there, I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger. For example: This is the original code: The css for the <div cortana_blurb> is set to width: 0; MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, ease:Linear.easeNone}), .4; TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 }); TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 }); TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 }); TweenMax.to(cortana_blurb, .15, {width:204, ease:Linear.easeNone, delay:1.6 }); } What I want is to minimize it to one line code like: MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, 64, 111, 144, 204, ease:Linear.easeNone}), .4; } I know it's a trick one, but if there is a way to do it and you guy could help me it will be great. Kind regards, Fernando Fas
  15. Here is another question How come that I can tween CSS properties directly without using the CSSPlugin. The below works. var $frame1 = document.getElementById('frame1') tl.add( TweenLite.to($frame1, 3, {backgroundColor:"#ff6a6a"}) ); tl.play() Am I missing something obvious here? If so, when should the CSS plugin be used since the above works in any case? Thanks in advance .S
  16. valiz22

    Rotating Words

    Hello, I am trying to reproduce the banner section from this website: https://www.triprebel.com/. In the codepen file (http://codepen.io/valiz22/pen/rerwxL) I have what I succeeded so far. Could anybody help me? Thank you!
  17. Hi I create TlimeLineMax image gallery animation. refer below code. "tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));" animation was work perfectly. but grayscale is too fast. how can i slow this grayscale aniamtion. Thank you.
  18. Is there a way to use GSAP TweenMax for basic CSS transforms on a movie clip instance in Adobe Animate when you are publishing to Canvas? For example: this.p1thumb.addEventListener("click", myFunctionp1.bind(this)); function myFunctionp1() { TweenMax.to(this.box, .25, { boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)" }); } It does not seem to work. I'm also interested in how you might change stroke widths, colors, etc. dynamically. Any ideas?
  19. I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place. And not sure what's the best search term for this. I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG? What is the best technology for this and where should I be investigating? - - - *Updated: I have found the article for it. It is done with CSS. I wonder GSAP can do the same too? https://css-tricks.com/reverse-text-color-mix-blend-mode/
  20. Hi, i am having an issue that i just cant solve. The demo Codepen illustrates the problem best. I would really appreciate if someone could help me. Basically, I have a <div> with position: fixed property. Inside this <div> i have an image that is cloned when it is dragged. The problem i have is that i don't want the clone to have position: fixed. Thanks.
  21. Onizuki

    Image brightness

    Hello how could I control (animate) the brightness of an image through GS? something like filter: brightness(2) fadein on hover. thanks
  22. Hi all. Quick question. I'd like to tween the kerning/letter spacing on a line of text. Got it working but have a couple specific inquiries. I wasn't able to locate the exact documentation for the letterspacing tween effect. My line of code is: TweenMax.fromTo("#text1", 1, {letterSpacing:20, alpha:0}, {letterSpacing:10, alpha:1}); I'd like to add a delay and also I want the text to tween from the center rather than from the left - how do I do that as well? Here is the CSS: #text1 { font-family: 'Anderson 1938', 'anderson_1938regular', 'Helvetica', sans-serif; font-size:28px; font-weight:400; letter-spacing: 10px; color:#fff; position:absolute; top:38px; left:121px; text-align:center; z-index:10; } I thought maybe the text-align:center; would get it to animate from the center but no such luck. Thanks in advance for any direction!
  23. Hi, I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such $('#logo').css({ 'min-width':'200px' }); And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. Any guidance would be appreciated!
  24. Hey guys! I am working up a new animated banner for my boss's site. I have 4 banners. Each one animated in to view and animated out of view. I just finished all their animations. I commented out the js and html for each individual banner while I worked on the animation. They are strung together as once leangthy animation due to my lack of knowledge with JS and Gsap but think it should work okay. However when I removed all my commented out JS and HTML to string all the animations together to play in "sequence" Every animation except the first example will lag into place and not show the whole animation. I am not really equipt to figure this out. I have no idea why it would act this way. The animations play smoothly when not linked together. You can see an example preview of my project here: http://portalpacific.net/Al/PennyGrab2.1/ And I have also included a zip file here for anyone willing to take a look at help me. http://portalpacific.net/Al/PennyGrab2.1/PennyGrab2.1.zip Thanks so much for your time! Any help at this point is beyond appreciated!
  25. Here is a fun idea: use GSAP to generate CSS Code. It would be a nice plugin to write a GSAP animation and have it output a CSS animation in N frames. I imagine it would be something like what Bounce.js does (https://medium.com/tictail/bounce-js-smarter-keyframes-ffa13a501ea7#.9tdmhd7z3). There are some environments that due to setup or legal issues it wouldn't allow to add a 3rd party library, but still you need to use the same timing/animation effects you used elsewhere. A plugin that allows you to export your animation to CSS animation will certainly help a lot.
×