Search the Community
Showing results for tags 'gsap'.
-
<!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!
-
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!
-
Is it supported by GSAP the animation for venetian mask effect animation? I surf the net about making a venetian mask effect using GSAP. If you guys know how to make please post here thanks! The animation look like this but using GSAP! Reference of animation: https://codepen.io/dudleystorey/pen/HrFBx
-
I have created a timeline animation, all the assets animate as expected with the exception of an image file. The .png file is not showing on the stage. I know it's probably something simple, but I can't figure it out. I'm using AdHelper which created touch screen issues on Mobile devices (you couldn't execute the clickTag). The line createjs.Touch.enable(stage); was commented out as per Cory's instructions and works perfectly. I have a few samples that I have to have 3 samples ready by the 11th July, so any help getting my images to show will be greatly appreciated. The image in question is London_Skyline_Silhouette.png. Thanks
-
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.
