Search the Community
Showing results for tags 'gsap'.
-
Hi everybody, So I'm playing around the latest GSAP SrollToPlugin and trying to recreate this sample published on the site: http://codepen.io/GreenSock/pen/LkOrKY The issue I occurred is when I click on the navigation, the content will jump back to the top first then do the scroll, I found if I use the <button> instead of <li> then it works just fine. Does anyone knows what cause this issue? Thanks in advance. Here's the code: https://jsfiddle.net/cotyhsu/6rrdt6kw/3/
-
Help! All my animations worked perfectly before I upgraded my chromium browser to the latest version. They however still work just fine in my Firefox browser. Kindly point out what I am doing wrong. Thanks in advance
-
Hi, I have a bezier curve generator that generates a bezier curve in terms of x and y coordinates. I want to input that generated bezier curve in the CustomEase GSAP function but I don't know What the values of s, cp, e represent in the CustomEase function. Can you guide me What the values s, cp, e represent in CustomEase and How are they calculated ?
-
is there anyway to set timeline duration regardless of each tween duration in timelinemax? i used this trick tl.set({}, {}, 15); but it only works when time line length is less than the new value -
<!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. First of all - I welcome me in GSAP community The second thing, that I have a problem with GSAP timeline functionality (check the codepen). Is it a bug? When second timeline is removed, in my opinion, it should not reserve the time for it. Especially not after invalidate(). Any suggestions for workarounds?
- 9 replies
-
- 2
-
-
- gsap
- timelinemax
- (and 1 more)
-
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 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 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? -
I am trying to use Morph and split text on a wordpress site that uses a picky theme. How would I get GSAP working on my wordpress site? Thank you! -John
-
Can you use GSAP's timeline to execute a javascript function @ certain time?
-
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});
-
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.
-
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 ?
-
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?!
-
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 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
-
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)
-
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 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.
-
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
-
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.
