Search the Community

Hi, I was wondering if anyone could help me out with a pretty complex path animation. I have a path looking like a radio wave and I need it to go through four stages where the last one just makes the path into a straight line (see attached image). Is this possible with GSAP ? My SVG looks like this: <svg id="secondwave" xmlns="http://www.w3.org/2000/svg" width="1440" height="165" x="0px" y="0px" viewBox="0 0 1440 168" style="width:100%;height:auto;" xml:space="preserve"> <path class="st0" d="M0,167C11.2,167,5.9,1,15.5,1S23,167,33.2,167S37.5,1,57.8,1s13.4,166,32.1,166S99.6,1,122.1,1 s16.1,166,32.1,166S169.7,1,189,1s15,166,30,166c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166 s11.8,166,30.5,166C369.4,167,361.9,1,371,1s7.5,166,16.6,166S394,1,403.1,1s3.7,166,17.1,166S425,1,436.8,1s12.3,166,17.1,166 c4.8,0,4.3-166,16.1-166c11.8,0,4.8,166,17.1,166c12.3,0,5.4-166,15.5-166c10.2,0,1.1,166,17.7,166c16.6,0,12.8-166,28.4-166 c15.5,0,19.8,166,33.7,166S599,1,616.1,1c17.1,0,7.5,166,29.4,166C661.1,167,661.1,0,682,1s18.7,166,34.8,166 c16.1,0,13.9-166,32.7-166s13.4,166,31.6,166S784.8,1,801.9,1c17.1,0,5.9,166,18.2,166c12.3,0,5.9-166,15.5-166s-1.1,166,17.1,166 S854.4,1,868.8,1c14.5,0,5.4,166,19.8,166c14.5,0,5.4-166,14.5-166c9.1,0,5.4,166,16.6,166S925.6,1,935.2,1s7.5,166,17.7,166 c10.2,0,4.3-166,24.6-166c20.3,0,13.4,166,32.1,166s9.6-166,32.1-166c22.5,0,16.1,166,32.1,166s15.5-166,34.8-166s15,166,30,166 c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166c20.3,0,11.8,166,30.5,166s11.2-166,20.3-166s7.5,166,16.6,166 c9.1,0,6.4-166,15.5-166c9.1,0,3.7,166,17.1,166c13.4,0,4.8-166,16.6-166s12.3,166,17.1,166s4.3-166,16.1-166s4.8,166,17.1,166 s5.4-166,15.5-166s1.1,166,17.7,166"/> </svg>

Hey there Since I am rather an amateur, I find it difficult to resolve the following issue: So I have this circle animation that moves on the left side of the page when clicked. Everything nice so far. However, the plan is to show the body of my page after I click and hide it again after I click the circle again, making the circle to come back on its initial size. I know that there should be some kind of procedure where i set some variables with the names of the div i want to show, but i do not know how to chain more animations and keep them under the click event that i have on the circle. The main idea of my website is that, when the user accesses it, he could see only the circle and, after he clicks it, the content of the page is showed. Something similar to this website: http://sergeymast.com/ (i know that most of his animations are in css but i want to improve my gsap skills along the way). Thanks in advance for the help, I really appreciate it!

Hello, Yes - I'm still using GSAP for Flash (It's awesome) - so I'll post my question here, even though it's very relevant to the Javascript version too. I'm sure some of you (especially the GreenSock folk) know about google's UI experience guidelines. Here's a link: https://www.google.com/design/spec/animation/authentic-motion.html Specifically, the authentic motion ones are very critical. It makes a night and day feeling when it comes to using apps and games. I'm wondering, to the Tween experts at Greensock, is it possible to do asymmetric deceleration like in the Mass and Weight section in this example, feels like the EaseIn and EaseOut are different numbers / factors? Thanks!

Hey guys! I am fairly new to GSAP and i am learning it by building stuff. I have an svg in the middle of the page and i would like it to animate to the left and then display the content of the page (which i did not coded yet). When the user clicks it again, i would like to return to its initial state and hide the content of the page. Throughout the past few hours, I tried various on click functions with if else statements but nothing seems to work. With the show/hide part of the content i will deal with it later, for the moment i would like to learn how to fix the clicking part. Thanks in advance!

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.

Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).

Hi guys This is probably painfully obvious to you - but I'm learning! https://beer-interactive-ani.webflow.io/bundle1-play See the navigation on the left fading from top to bottom ... all I want to do is create a seamless loop. At the moment it's waiting for the tween to end before restarting again - how can I set it so it loops perfect before waiting??? Thanks in advance!

Hi Carl, It's me again. I have been coding an animation using GSAP recently and I came across a case that works fine in Chrome and Firefox but act strangely in IE including IE11. I eventually found a workaround but I thought maybe it would be something that the GSAP team want to take a look into. The problem appears when we have a <div /> with "height:XXpx" and "padding:XXpx 0" and we only want to animate this <div />'s padding to a different size. The truth is that the height doesn't change in the animation at all but... The problem: If we provide only the target padding, all the browsers including IE act normally with correct animation, but as soon as we also provide the target height which is practically the same as the initial height, IE animation gets ruined (other browsers still work correctly). When one inspect the elements, it can be seen that the height is being decreased during the animation in IE and comes back to normal at the end. Workaround: Not to include the height in the parameters, but this only works if we don't want to change the height during the animation. *) One thing that might or might not be the reason is that I have used a <svg /> element directly inside the <div /> which is being animated. Thanks for your attention in advance.

Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen. 1) The SVG elements animation order will be missed up and will not work correctly. 2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation. I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up. It would be really nice if you can figure this bug out and release a new bug-fix version. I am currently working on a project and I really need this feature to word correctly. Thanks in advance.

Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?

Hi I'm trying to scale an image over a period of time but it appears jerky! Is there a way I can make it smoother? Please refer to Codepen URL. Thanks!

Question regarding IP of animations... Hello everybody I spent 30 hours on an animation, which has got not too shabby at all. =) How can I make sure that the animation code is not used without permission by other people right after they right-click on my website and copy paste it out? Is there a way to secure/protect the .JS containing the GSAP code or is it basically "fair game" for copycats? Best regards, Matt

Hello guys, I'm with a doubt in building an application. I have a home screen where there are multiple animations. The animations are made in SVG images. But the problem is that they are getting too slow and when they stop using scroll animate (in IOS) and are slower (on Android). Could someone tell me if there is any limit animations for a mobile application? or if it really works? Thank you very much in advance

I've given up and trying to figure this out by myself. Mostly because I want to get this animation finished. I am trying to line up the tweens 'line' and 'text' for the codeCatch timeline of the Master timeline. I want it to look like the text is attached to the end of the fishing line. It's almost there but I'm at a loss at how to fix this on my own. The animation of the 'line' and the 'text' was aligned until I started animating the rotation properties in the earlier timelines.

I want to create an animation where multiple elements can slide across their container at the same speed. It's awkward to use the duration for this purpose, because the elements can be of different lengths, so with the same duration longer elements will move faster. Is there any way to fix them at the same speed?

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!

this is my first attempt using GSAP (it seemed to be the best animation library I could find). I'm trying to create a simple slot machine. Here is a codepen with the minimal amount of code. http://codepen.io/dax006/pen/LGoNrE It does 3 things. After creating a random symbol, it 1) creates a 'constantly spinning' tween and saves it 2) creates a 'slowing' tween and saves it 3) resets the progress of each tween/symbol to be 1/4th down the screen. Bug/problem #1 - Tweens are playing yet NOWHERE do I play() the tween. The tweens are PAUSED by default. Even if they are not paused, I IMMEDIATELY pause() them in resetslot(). Problem #2 - Progress() does not seem to be setting all symbols accurately (you can immediately see that the top symbol is askew) Problem #3 - Setting a tweens progress() to zero triggers its onComplete (watch the console) Problem #4 - Setting a tweens progress to 1 triggers its onComplete even though I have SuppressEvents:true (watch the console) I'm very frustrated with GSAP at the moment . Any help is appreciated -John Edit:problem 5 can't pause the codepen demo so can't read console

Dear Green Sock pros, We are developing a Formular 1 simulation for which we depend on "cars" (=dots) moving on tracks, that we already built as SVG path. We are delighted by GSAPs animation capabilties so we would very much like to use it. Sadly it seems, it supports animation along a path only based on bezier curves with a value list, but not on SVG path'. Does anyone know a workaround or have information about the implementation of SVG path support. Thanks a heap! Daniel

Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio

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!

Hi, newbie question. I am struggling a bit with the syntax. How would I add the graph variables to this piece of code? .from(".device-iphone", 0.7, { opacity: 0, x: "-150%", ease: Bounce.easeOut, delay: 0.5 }) I mean the (graph,10,) bit from the ease visualizer TweenLite.to( graph, 10, {ease:Bounce. easeOut,y: 0}); Thanks in advance

Hi, I am just trying to animate a plane between n-points sequently (every path is described as a quadratic bezier curve) since 3 hours. But I dont know how to autorotate it correctly, The paths are dynamically and the plane should always follow on the line, therefore I cant set the rotation initially to a fixed rotation. I also want to animate the size of the plane, starting with small to normal and ending with small, till the next bezier curve is starting from the end of the first. Can anyone help me with this? Graphic: http://pasteboard.co/1A9iuOJd.jpg It is also possible to plot a line behind the plane with TweenMax?

Hello there, after wasted hours of google searching, i will try to find help here: I just started with GSAP and i absolutely love it. But there are two problems which only appear on firefox: I'll post this link as well, because i dont think it's clearly visible in codepen: http://markmaurer.de/tween/ Problem 1: The animation is REALLY laggy and unsmooth in FF. It looks weird... Problem 2 (not visible on codepen): Text rendering, aliasing, smoothing or whatever changes after the animation is finished. Looks also weird? Everything works smooth on this page: http://www.riiotlabs.com/... So it should be possible to do smooth animations on FF. I've tried almost everything i could find in google but nothing worked. What am i doing wrong? Thank's a lot in advance for any help! Kind regards Mark

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()?

I'm trying to create an SVG that has clickable shapes, which, when clicked fills the entire shape from the inside out. http://codepen.io/anon/pen/OMBPar ^ This works well for filling the entire region at the same time but what I'm trying to achieve is a "ripple effect" which will fill outwards from the point at which the click took place. So the fill "diffuses" out to the edges of the shape (and stays within the clicked shapes). Essentially, I'm after something like the following effects: http://tympanus.net/Tutorials/SVGRipples/ http://codepen.io/zavoloklom/pen/wtApI http://codepen.io/Craigtut/pen/dIfzv http://codepen.io/anon/pen/BjYQeM But ideally just using Tweening - is this possible? Any help is much appreciated! Thanks.