Jump to content
GreenSock

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

Search the Community

Showing results for tags 'gsap'.

  • 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. In the first lines of JS i´m doing: TweenMax.set(".big-flipper", { transformOrigin:"75px 0px -37.5px", }); Gsap is not applying the z value, when i inspect the element with google Dev tools the z value always becomes "0" no matter what value i use: transformOrigin:"75px 0px 0px", .... cheers
  2. Hey i was wondering if you could help me guys, in the past years I used to create alot of ADs using flash AS2 / AS3, always relied on GS as the most easy way to build apps. Now that AnimateCC was realized i thought it would be a nice idea to work on AD projects again... i searched the forums, the website and so on... http://greensock.com/animatecc-quickstart <- found the guide and read it, started to build my own test-ADs. It works so nice when i use the premade templates of GS. BUT ONLY when i deploy the AD in animate cc, the html (combined with an ip and so on) works just fine BUUUTTT if i just open the HTML, i only get nothing but a white screen with the black border where the add was supposed to be what did i do wrong? i rebuild my banner a few times, tried to figure it out, but i have no clue why it`s like that :/
  3. Hey everyone, I was interested in learning more about how to create a physics animation effect, similar to those that I've seen in demos or in live sites (like kairoswatches.com). Specifically, I'm interested in learning more about what goes into the creation of say....a field of star-esque lights that just link and float about behind other things (for instance). I'm not trying to have someone make something for me, but while I am an experienced front-end developer, I find the physics stuff slightly intimidating. In summary, if anyone can recommend some resources/methodologies that would best help me with what I'm trying to achieve I'd appreciate it. If I need to add/provide any other info, just let me know. Thanks!
  4. FYI the issue was on Chrome with Windows too, but it happens 100% of the time on OSX Chrome I have a ~30 second long timeline. I trigger a play and pause event depending on where you are on the page. If the animation is in view, it plays, if not, it pauses. I was having an issue where on the footer of my page certain elements would disappear for some unknown reason. So I did around 2 hours of figuring out what it was, and I narrowed it down to some CSS animations I left looping (unrelated to GSAP). That made sense, it was performance draining and so the browser started to glitch. So instead I tied this animation to my timeline and it worked even better than before... but the issue remained. Even when the timeline was paused, if the elements I was animating were stuck in a CSS transform in any way, elements on the page would disappear in Chrome OSX (100% of the time). I fixed it by adding a class that set transform to none when the timeline pauses, and removed it when it played. This was the only way I could fix it. I can't share the URL publicly, but I can post links to both versions via PM if it helps. My main questions in regards to this: Is this a known issue at all? If you animate dozens of things at once (in my case, dozens of 6x6 little squares), is it likely to cause issues, even if the browser isn't using much memory/CPU? It worked fine in every other browser. FF, Safari, IE, even IE9. Thanks
  5. Hi! I´m using (ease: Power0.easeNone) in all the tweens and the movement is not linear like it should. It should run exactly the same as when the cube closes. Also if you run it on IE it starts all glitchy. Why the ease: Power0 is not working and why IE have those problems? Hope somebody can help me, thanks!
  6. I am trying to have an element scale on mouseover but the div and the text inside is pixelated. I can't figure out why... http://codepen.io/dchadney/pen/BnlFi
  7. Hello all, In my new project, I am trying to make animations with rem units, but I have encountered a problem. I code an example on codepen.io:http://codepen.io/Sophia-xueer/pen/jqewJN?editors=1111 In this case, the 'width' animates normally, but the 'border' has an unexpected behavior, which changes from a very big value, not the value of css. I found if I use px units or set the start values before tweening, it worked. But it's a bit complicated when I make some complex animation. Is this a minor bug? And whether it will be fixed in the next version ? Any help very much appreciated! Looking forward to your reply.
  8. Hi! I'm today trying to get something, but i'm failed. I did own javascript animation platform, that can do part of thing of GSAP! But i need "In-Sync" tweening, basic users don't need that, but for sliders, tab-changed, Timeline GSAP script is best working. Missing some feature i need. TweenMax.to('#element', 1, { width : 200, height : 200, x : 100, ease : { width : 'QuadInOut', height : 'ExpoInOut' }}); // these syntax is for example, maybe have wrong syntax, sorry I can create this plug-in (pls let me read useful docs for creating plugin) and have already? It's reduces memory, CPU and size too. Thanks, Any reply appreicate. Sorry for english
  9. Hello all I want to create a animation like CSS3 keyframe animation with GSAP, but I have encountered some problems. The first is how to set keyframes, see the below css code: .element{ animation: ball 2s ease-in-out } @keyframes ball{ 25%{ background:red; } 50%{ background:yellow; } 75%{ background:green; } 100%{ background:black; } } //or a more complex one .Shake { animation: Shake 3s ease 0s forwards; } @keyframes Shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } I use TimelineLite.to() with accurate time setting to create a similar animation: var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red}) .to(element, 0.5s, {backgroundColor:yellow}, 0.5) .to(element, 0.5s, {backgroundColor:green}, 1) .to(element, 0.5s, {backgroundColor:black}, 1.5) Is there any better way to create such a animation? And the second problem is how to set a type of ease to the whole timelineLite, not just to one of the tweens? For example, in css, 'ease-in-out' is applied to the whole animation, not just between two of the keyframes. .element{ animation: ball 2s ease-in-out } But in gsap, it just works on one of the tweens , not the whole timeline. var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red,ease: Back.easeOut}) .to(element, 0.5s, {backgroundColor:yellow,ease: Back.easeOut}, 0.5); Any help very much appreciated!
  10. So, I wanted to give you guys some more support from the comments on the GSAP home page, but it seems as though the comments are bugged. I have an attached image of the issue.
  11. Hello, I trying to create a top navigation bar draggable on desktop and mobile but have some issue with the following case : Basically I need to have a container (bounds) smaller than the navigation bar (element) that I need to drag inside. You can have a look at the following jsfiddle. https://jsfiddle.net/biquetto/4th0sfp2/28/ Regards
  12. Hello fellow Greensockers! My conundrum is as follows: - I'm trying to layer several images on top of one another - Each image is masked with a curved / irregular shaped SVG mask (could be PNG or SVG Path or external SVG) - Each mask needs to animate - Now heres the kicker, each image needs to be clickable / interactive within the constraints of the mask area I forked Jonathan's example (http://codepen.io/jonathan/details/OyarJK), as it was already using an animated SVG/PNG mask which ticked off the 1st 3 points above. My fork is here - http://codepen.io/timostsauber/pen/zqzmKV I am using a SVG Path for the 1st mask, and a SVG file for the second mask. Just to test both. So the 1st one is not using attr for animation whilst the second one is. Each image has a hover event listener, but as you can see the top image clickable area takes up the entire banner, outside of the masked area. I realise I can achieve this with separate, invisible buttons on top of the SVG image masks, but this would mean code duplication, and also animating the invisible buttons to move with the masks + images. I tried various combinations of pointer-events on the image / SVG layers, but to no avail. So I'm very curious to know if this is possible, as this method of masking seems to be the best and most cross browser friendly. Thanks for any help in advance!
  13. I'm trying to make a parallax elements/background like here http://www.samsung.com/global/galaxy/wearables/gear-vr/ Is that use GSAP?
  14. Hello all, I am new to GreenSock and the forum. It's really amazing. I love it so much. I am trying to use TimelineLite in my new project, but I have encountered a problem about getting the calculated styles of function progress. For example, I have set 'x' from '0' to '200', and when I use the function progress(0.5),I want to get the data '100' of 'x'. I know maybe I can just get the data from inline styles of DOM, but some properties such as 'transform',which has transferred to matrix, can not be gotten independently.So I want to know if there is a better way to get the accurate styles data object. Any tips for me? I am sincerely looking forward to your reply. Thank you very much.
  15. I am unable to get the callback functionality to work while using Meteor framework. I have copied functions straight from the GSAP docs and i still get type error: this._callback is not a function. I have tried everything and looked everywhere for a solution but no dice. Please, any help would be greatly appreciated. If callbacks don't work with Meteor or i am just flat out doing something wrong please let me know. I would add a codepen but i don't believe they have a Meteor framework to use. Template.home.rendered = function(){ TweenMax.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5, myCompleteAll ); function myCompleteAll() { console.log("all tweens complete"); } }
  16. 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!
  17. Hi everyone, When animating a div to move up from the bottom, there is a large blank space left at the bottom where the div that was animated was. Does anyone know how to fix this or get rid of the space? Thanks!
  18. I created a simple timeline following a tutorial, but the animation doesn't run and I keep seeing this in the console: Uncaught ReferenceError: TimeLineLite is not defined Here's my pen: http://codepen.io/omarel/pen/mPEmpe
  19. Hello, I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line. http://codepen.io/anon/pen/MyKVJW As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block The slides use the following timeline var tlSlideOut = new TimelineLite() tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"}) .add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0) .add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0) var tlSlideIn = new TimelineLite() tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"}) .add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0) .add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0) Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated. Many Thanks Adam
  20. hello everyone, i got another trouble and i hope anyone of you can help me. i get one svg, there are six circle inside of it and i want to move the pink to the right with left property but i doesn't work. it worked when i changed the left with x. so what is the trouble?
  21. Hi Does anyone know how the spinning browser icon was made on the GreenSock homepage. I've done a number of tutorials, but haven't come across it yet. Thanks!
  22. hello everyone, i'm wondering how can i centering my svg object exactly in the center of the screen. I give a style for my svg like position: absolute, top:0,left:50%, transform: translate(0,-50%). how can i move it to the center of the screen with gsap?
  23. 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!
  24. Hey guys, first of all i wanna say thanky you very much @ the GS Team, for this awesome libary. Im pretty new to Javascript and programming overall, did watch some Javascript Tutorial and did read a litle bit about it. Did only work with HTML and CSS before (animationwise only with transitions). Basicly im trying to learn Javascript to code a Slotmachine, a pretty complex one (which has a working php script and did work in flash before), but unfortunatly flash isnt the best for mobile devices, so i guess going with Javascript is the way to go. As i said im new to Javascript, i did code a basic Slot this night. Which does not more then spinning the reels on a button click with random symbols appearing, i did not try to connect it with php yet (ill do this after it works as it should). My Slot got 5 Reels with 3 Symbols each reel (at all it got 6 Symbols for the animation per reel, as im resetting the position for the reelanimation after the 3 symbols are out of the viewfield of the reel.) So, i got this working with a semifluid animation, but my problem is the animation lags (probably cause alot of things are done at the same time) at all im moving 30 125x125px divs at the same time + changing the symbols. My code for this is about 400lines long, (could be much shorter if i optimize it). Im wondering if there is a posibility to do such a complex animation without lags just with JS and GSAP, or is it in this case nessecary to go with Canvas? If you think that it is possible to get a smooth working slot, which solution would you use? regards houseshow Gonna give it another try, with another idea which i had and will post a codepen link, after im done. Maybe you can give me some hints afterwards.
  25. i need to make an animation frame by frame, basically after pressing the mouse the animation starts by changing background image like some kind of stop motion by using this code: document.addEventListener('click', function() { if(counter<1){ audioElement.play(); var cancello=document.getElementById("cancello1"); //var cancello2=document.getElementById("cancello2"); TweenMax.to(cancello, 3, {rotationY:125, transformOrigin:"left top",opacity:0}) TweenMax.to(cancello2, 3, {opacity:0}) contatore++; } else if(counter<2){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche29.png)'}}); <--this one audioElement.setAttribute('src', '235.wav'); audioElement.play(); //var porta = document.getElementById("porta"); //TweenLite.to(porta,5,{opacity:1,scaleX:2,scaleY:2}); contatore++; } else if(counter<3){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche212.png)'}}); <-- second frame var titolo = document.getElementById("titolo"); TweenLite.to(titolo,2,{opacity:1}); contatore++; } else if (counter<4){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche220.png)'}}); <-- third frame } } the problem is that the image flash for second before appearing, also... how can i impost an automatic cycle in which the images appear one by one, since the actual cycle only increases at every click. or there's a better way to do this without using tweenlite.set()?
×