Search the Community
Showing results for tags 'gsap'.
-
Hi I'm using the GSAP Flanimate example, but it does something odd where after about 90 second all the images fail to display, just showing the broken image link. No idea why. Does anyone know what i'm talking about? -
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!
-
Hi guys, I'm about to make a game with at catapult/rubberband, somewhat like Angry Birds, but only vertical and not horizontal. You need to hit flying objects that "rains" down. I'm in the research phase right now, and I am thinking about using GSAP with it's Physics 2d, instead of going all out physics and using something like Matter.js. Do any of you have experience in using GSAP for games with Physics? I still haven't decided if I want to use DOM notes or Canvas.
-
Hello. I always use GSAP for my banner animation - and today (of course when we are up against a crazy deadline) all of our banners that are tweening transparent png's are showing a black outline around the pngs. It's strange because I've seen this bug with IE8 (which we don't support) but only when the images have a drop shadow, the drop shadow becomes solid. I've never seen this before and seems to be affecting all of our units that I've used transparent pngs on in the past. Is there something going on with the platform? This error is in all versions of IE. I'm calling TweenMax from: https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js Any fixes? Any ideas why this is happening? There are not drop shadows on these pngs. Here is an example line of code that is moving the pngs around TweenMax.to('#clouds3', 2.2, {alpha:0, x:"+=300", y:"-=140", ease:Power1.easeIn, delay:.5});
-
Can you use GSAP's timeline to execute a javascript function @ certain time?
-
I have the following code: window.onload = function() { var tl = new TimelineMax(); tl.to(document.getElementById("exit-button"), tt, {autoAlpha:1, ease:Power3.easeInOut}) } I'm loading tweenmax from the CDN. And on my localhost everything works as planned, but when I upload to the clients server I think they have some other scripts/ assets that are throwing the window.onload off. What can I do to avoid the error: "Can't find variable: TimelineMax"? HELP?!
-
Hi, I have a text inside a div and then I'm calling SplitText function to seperate them into lines. But on window resize lines remais too long for mobile and I need them to recalculate on window resize to fit into browser witdth. How can I update on window resize lines that are created from SplitText ?
-
Hey all - As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix. I am pretty satisfied at this point. The only other things I was struggling with were... 1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in $(".blue-uxd:not(#diamond)").hover(function(){ joinButton.hide(); uxdButton.show(); 2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from black to blue. Could I use a switch or something that only activates if the diamond reaches the top/floating step? TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 3) And when I hover over the "X/A" the " join button fades out and the "What are you waiting for?" fades in right after... $("#xa-flip").hover(function(){ button.hide(); uxdButton.hide(); joinButton.hide(); hiddenButton.hide(); joinButtonActive.show() TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0}); TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0}); joinButtonActive.hide(); hiddenButton.show(); }, function(){ joinButtonActive.hide(); hiddenButton.hide(); button.show(); joinButton.show(); }); thank you very much, nick
-
Right now I have some code that I've hacked together that for the most part, does exactly what I want it to do. The problem is that the code itself seems convoluted. I'm talking more about the GSAP part my code, which has a lot of repetitious markup, but I'm at an odd's end on how to make it more concise. I've tried using the reverse(). function, but I can't seem to make it work... Any ideas? var trigger = ".trigger"; var recipient = ".target"; var not_trigger = $(".trigger").not(this); $(trigger).click(function(e) { e.stopPropagation(); recipient = '#' + $(this).attr('data-target-id'); var not_recipient = $(".target").not(recipient); if($(trigger).hasClass("active")){ $(trigger).not(this).removeClass("active"); } $(this).toggleClass("active") ; if($(".target").hasClass("open")){ $(not_recipient).removeClass("open"); TweenMax.to($(".target"), .3, {display:'none', y:'0%', autoAlpha:0}); if($(recipient).hasClass("open")){ $(recipient).removeClass("open"); TweenMax.to(recipient, .3, {display:'none', y:'0%', autoAlpha:0}); }else{ $(recipient).addClass("open"); TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1}); } }else { $(recipient).addClass("open"); TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1}); } });
-
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
- 4 replies
-
- 2
-
-
- gsap
- javascript
- (and 2 more)
-
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)
-
Hi everyone, I am completely new to both GSAP and Gulp and I'm having troubles to run gulp after gsap installation. Don't know what to do. I have installed gsap this way: "npm install --save-dev gsap" and after that I add to my gulpfile.js gsap = require('gsap'); after that, i run gulp on my cmd and this shows up: C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2535 _doc = document, ^ ReferenceError: document is not defined at Function.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2535:11) at check (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5858:61) at new Definition (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5875:10) at window._gsDefine (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5880:12) at Array.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2488:11) at C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:7634:9 at Object.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:7645:3) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) What did I do wrong?!? Am I missing something? Thanks in advance.
-
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!
-
Hi there, I'm converting a CSS animation to GSAP, and I'm getting some weird positioning after conversion. Can anyone tell me what am I missing here? Any help would be appreciated.
-
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
-
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 :/
-
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!
-
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
-
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!
-
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
-
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.
-
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
-
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.
-
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
-
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!
