Search the Community

Hi Guys, I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from? Note that it doesn't work in IE at all! Cheers, Paul

Hi all, I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline). What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. Any ideas?

Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){ TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); x.click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });

I was wondering how do you detect that GSAP is loaded into the DOM and ready to animate the banner? DoubleClick provides you with this in their example of polite loading a banner, where the JS and CSS is loaded later into the DOM. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ //Load in Javascript var extJavascript = document.createElement('script'); extJavascript.setAttribute('type', 'text/javascript'); extJavascript.setAttribute('src', Enabler.getFilename('DCRM_HTML5_inPage_Polite_300x250.js')); document.getElementsByTagName('head')[0].appendChild(extJavascript); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getFilename("DCRM_HTML5_inPage_Polite_300x250.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("container_dc").style.opacity=1; document.getElementById("loading_image_dc").style.opacity=0; document.getElementById("container_dc").style.display = "block"; } </script> But I found that when I added GSAP to this, my code would always load first then fire off and not wait for GSAP to be ready. So a dug a little deeper into DC's Enabler.js and found they actually had a loadScript function with call back. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> var TweenLiteJS = false, CSSPluginJS = false, EasePackJS = false; //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js', function(){console.log("TweenLite Loaded"); TweenLiteJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js', function(){console.log("CSSPlugin Loaded"); CSSPluginJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js', function(){console.log("EasePack Loaded"); EasePackJS = true;}); Enabler.loadScript('script.js', function(){console.log("BannerScript Loaded"); Banner.init();}); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getUrl("styles.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("banner").style.opacity=1; document.getElementById("loading").style.opacity=0; document.getElementById("loading").style.display = "none"; document.getElementById("banner").style.display = "block"; } </script> So I ended up with this in the HTML and then this in the JS Banner.init = function(){ //Just an extra check to make sure all library files have loaded as well. if (document.readyState === "complete") { if( !TweenLiteJS || !CSSPluginJS || !EasePackJS) { console.log("Not ready to animate yet, try again in 500ms"); setTimeout( Banner.init, 500 ); } else { console.log("Animation start"); Banner.animate(); addListeners(); } } } And it works, the animation isn't fired off before its ready to. I was just wondering if I've over complicated things, or I've missed something. I actually got this idea from @letssock when talking about implementing GSAP into Celtra.

Hi! I'm working to new animation engine! Cross-browser and back to IE8 support for transform (rotate, scale, translate), but it's always uses transform-origin is 50% 50% or 0px 0px! I obtained and installed TweenMax.js CSSPlugin IE8 transform script and works on any transform-origin! My project is MIT-Licensed. Is it possible use code on my project free or need BUY license or completely restricted? Sorry for bad english!

Just started using GSAP and have built a grid using TimelineLite animations (see Codepen below). I'm keen for any comments on ways to improve as I'm pretty new to all this.

Hi GSAP authors! I'm need help, i maked tweening engine, Animo.js (github.com/dalisoft/animo.js - 2 branch (v2 and master v1). I Highly optimized the performance, but i dont know why i can't tween smooth than GSAP. I have question, why TweenMax size too large??

Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.

Hi there. I'm interested in doing step animation but using the smallest engine you have to offer for GSAP, which is TimelineLite (correct?) I was wondering if there was an equivelent to something like this http://codepen.io/anon/pen/yNpQEq But with GSAP? Really need a light weight solution as most sites are not allowing more than 40k zipped HTML5 packaged files still and CSS3 older browser doesn't compare to Greensocks.. I did see this http://codepen.io/MAW/pen/MYdwRP But TweenMax is HUGE. Halp? Thanks.

Forgot to clarify in title -- been using TweenMax Hi Guys If you take a look at my codepen, you can see there are multiple 'dashes' animating on the left side of the screen. I have been slowly stripping down this codepen ("GSAP Bezier: Cubic"). But these dashes are added as part of the bezier animation, and I'd like to add them without that... My goal is add multiple 'dashes' on page load, without delay. And add these at specific positions, without motion. Breaking down the task as I can understand it: Load the first SVG all objects are based on, as a variable Multiples of the SVG variable Add 10x more of that variable instantaneously Place these variables at specific x & y positions in the window Looping fade animation (currently applies to all not individual) Stretch goal! Add a nice fade in / fade out on all of it when you land / leave the page. 2.1 & 2.2 is where I feel stuck. Pointers in the right direction? I think one of my biggest issues is that I don't know the correct vocabulary to use while searching... Ultimately, I'd like to get the dashes spaced evenly on the x-axis, and randomly within a range on the y-axis, but animate a fade. That specific Math function is something I think I can work out later. Full disclosure -- I'm totally new to all of this (both GSAP and JS), so I'm in over my head a bit. But trying to get there by doing something challenging! Also apologies for the junk list of links at the end of the codepen JS section, it's the easiest place for me to stash links while I'm tinkering. Thanks!!

Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.

Hello guys, I'm new here, and i'm trying to make this SVG rotate forever, but it just won't work, i've tried making the time -1 and it still wont work. any suggestions? Thanks. <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function(){ var logo = document.getElementById("logo"); var tween =TweenLite.to(logo, 5, {rotation:360, transformOrigin:"50% 50%"}); //keywords tween.restart(); } </script>

Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you

Hi guys, today i was trying to reproduce a kind of fountain effect made of div with the following concept: Create a javascript array Push a div into the array Initialize its position with css wherever you want Move the dive like a water spurt Repeat with setInterval Well as you can see it's quietly easy, not that complicated but i was wondering how can i realize the fountain effect? well i mean, which kind of function do i have to use to give my animation this effect? Here's an example of what i'm trying to reproduce. http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity Note: the previous example is realized using a canvas, i'd like to reproduce it without canvas, only using divs, jquery and the TweenLite library. TL DR: Which is the function i should use to reproduce something like that: http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity using the TweenLite library?

Hello I want to create a animation in which following events occurs 1) A custom horizontal scrollbar on the bottom of the page,this bar ro remain constant and do not move 2) A horizontal navigatable website( using magicscroll.js) 3) All the animation is related to horzontal scroll movement of the custom horizontal bar Animation required 1) As soon as i move the below horizontal bar the #cover div should reduce the opacity for the radius and the div behind it should be visible. How is this animation achievable using GSAP. Please help I am a newbie to GSAP

Hi guys, today morning i was reading the "get started page" on the GSAP web site, i was finding it really interesting, then i decided to try it. But as soon as i wrote my code and launched on google chrome, it didn't seem to work at all. Then i started wondering if there were some problems with my browser even because i tried the same code on CODEPEN (http://codepen.io/RyanLeenox/pen/EjWNRg) and it's working perfectly. So my question is, what to i have to do, to run the code on my browser? ps. I'm new here, this is my first post and i really hope this is the right section, these are the right topic tags, if not i'm really sorry about it.

hello, thanks for this awesome GSAP i have one question, a simple code as below var tl = new TimelineLite(); TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100}); tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2); tl.play(); staggerFrom seem better for my code but i cant get it work, i will try again late so now i set the $a property by TweenMax first. if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too? e.g set translate, opacity, z-index, scale etc any different between set property from css / TweenMax? which one is better? sorry for my language skill, thanks so much

I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).

A warm hello to all of the community! (Apologies if the preamble's a little boring, you can always just skip to the heading below where I'll start cutting the mustard.) I'm Alex, and I started using GSAP a few months ago, after immediately falling in love with its robustness and sheer performance. It was at that very time I started my new job, and it was time to start using GSAP in all of my front-end projects I decided. So, I posted about one or two things here on the forums, and was further overwhelmed by the quality of support provided from GSAP's developers, and other members of the community. The weekend before I started that job, I spent the whole time beginning to write a little library that'd allow me to easily make calls to GSAP with some pre-determined transitions I find myself using a lot in my projects. It was largely an exercise in using GSAP and I thought it could be helpful to me in future. As I went along, using it in development, I encountered bugs and realised that I needed to add many features and improve a lot of aspects of it for it to "just work". So, I kind of flew by the seat of my pants with it and bolted in new things or fixes and continued to use it in development. Since then I've been using it in 'live' releases (i.e. other people have been using the projects but thus far they're internal), and I haven't encountered any major issues. Though there is a lot of work and improvement I know I would do if I had the time. Anyway, it has ultimately saved me loads of time and been a pleasure to use, since I can quickly adapt the transitions I'm using, I don't need to repeat large chunks of code spuriously through my different projects, and it's designed to be very easily intelligible to people who haven't even used it before (or GSAP.) To quote Jack, "But in fairness to Julian, he really wasn't trying to build a tool that's as robust as GSAP - Velocity is more for simple UI animations in the DOM.", the thing I like to be able to do is harness GSAP's power and flexibility where necessary, but also make simple UI animations in my projects. Since GSAP is clearly the most performant/cross-browser animation suite available for the web, those benefits are important even in the websites I make, where I can often be using things like Skrollr.js too, and require backwards compatibility to the older, often nasty versions of IE. So that's the purpose of QUI really, and I hope other people find it useful Without further ado I've made it available as a project on GitHub, it can also be installed via Bower and it uses GSAP as a dependency, so if you have those tools installed and are a little familiar with the command line it can be added to your project in no time. I'd love it if people made pull requests and possibly even helped motivate me to think more about this project. I would say at the moment it's still very usable for most purposes, but I know that some of the transitions haven't been updated since I better learned how to implement them. I haven't yet written documents for the project, though I am planning to this afternoon. I'm going away tomorrow and I need to pack etcetera but I think I'll have time anyway. That'll probably make a big difference, so I'll post about that when I have done. Seriously, there are tonnes of things I know I could do to improve this, but I figured if other people had a tinker it'd happen a lot faster. The main thing for now I suppose is it works and seems to add very little overhead to my projects, both in terms of loading times and execution. GitHub page: https://github.com/Quasso/qui GitHub site (it's a small demo): http://quasso.github.io/qui/ Install via bower: bower install qui (--save-dev) Really looking forward to hearing any feedback anyone may have. Docs soon!

I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins. The result is jquery.gsap.sprite.js. Gitub: https://github.com/agrothe/jquery.gsap.sprite Demo: http://jsbin.com/quvuzo/6/edit?html,js,output Sample Usage: var mark = $(".mark").sprite({ frameWidth: 24, frameHeight: 70, sheetWidth: 120, imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" }); // Pause the sprite mark.sprite("pause"); // Play the sprite mark.sprite("play"); // Resume the sprite from where it was paused mark.sprite("resume"); // Restart the sprite from the beginning mark.sprite("restart"); // Stop the sprite mark.sprite("stop"); // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true); // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true); // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2); A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control. Comments and suggestions more than welcome.

Not sure if this should be Flash or JS, but its a crossover project. I've recently been working on a big campaign, that uses a large amount of character animations, and our team was using a mixture of Flash and After Effects to achieve these great animations. Then came the mobile placements, and I found that the actual delivery platform itself had no support for canvas or easelJS and barely any SVG support. So I ended up creating spritesheet animations using CSS and manually setting up frame by frame animations in Illustrator, the problem was now that these animations didn't match what the rest of the team was doing in Flash. So I looked into exporting the spritesheet from Flash itself so it would capture frame-by-frame movements, but the issue was Flash Spritesheets place the character in an X and Y fashion, rather than all being on 1 line. I played around with a Codepen to make it work and used the onUpdate ticker to make it work with an array of all the possible background positions. Then I thought, why not make this an export option straight out of Flash? Its a little work-in-progress, but I hope this gives an idea of what I wanted to achieve. It just exports out a HTML page that uses GSAP to animate the background position from an array dataset. https://gist.github.com/joemidi/87168087b5c0eae36e86#file-gsap-spritesheet-plugin-jsfl

I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel

Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.

This question has probably been asked, but my searches have not turned up anything of value yet. Basically I have an animation sequence that will be used on multiple timelines. Is there a way to 'package' a unique timeline and apply it to others? An example I might come up with is the flapping of a birds wings (I'm not writing that btw). The sequence I might use to flap the wings could be generally applied to a number of wing images, and bird bodies. Apologies in advance if this noob question has already been addressed.

I was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions). The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers? I had never thought of this and didn't know the answer. Also they wanted to know if GSAP 'degraded gracefully'. If GSAP doesn't work on all older browsers, how do I handle that? I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock. What would I test for? Are there polyfills? Thanks for any info!