Search the Community

Hello all, I am new to GreenSock and the forum. I must say I am loving it! We are doing a Cordova mobile app with React. We started using GSAP for all the animations. This works great in Ripple and also physical Android devices. Even older Android devices, which we were sure were going to be a problem, everything is running super smooth. The problem is with iOS devices. We have tried iPhone 5S with both iOS 8.x.x and 9.x and also iPhone 6 and 6 Plus and on all of them performance is really bad. Animations are chopping up and stuttering all over the place. I tried adding the translate3d transform and also adding force3D to the options object and nothing helps. In the codepen the red div slides down more than one screen length and I know this is a lot of pixels to animate, but what works fine on an S3 I would expect to work better on an iPhone 6. Any tips for me? Thanks!

Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div. First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around. I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code. JS TweenMax.set('#star', {rotation:-30}); TweenMax.from("#star", .5, {scaleX:0}); TweenMax.to("#star", .5, {scaleX:0, transformOrigin:"left", delay:.5}); HTML <div id="star"> </div> CSS star { position:absolute; top:-1; left:68px; width:285px; height:94px; border-top:1px solid #fff; opacity:.5; }

I have some troubles with progress and totalProgress methods. When you hover wave, penguin will go to your cursor position. I want: if cursor position to the left than penguin, penguin must follow by cursor, but now his animation continues. Also I need that penguin make backflip when his position and cursor's position are equal. Also when cursor leave wave picture, he must go on the top of the wave and drifting on the waves. But all of it after. Thank. Sorry for my English. http://codepen.io/anon/pen/gaeoEy

Hi all, This is a basic question that I've yet to find answered... how do site administrator's implement GSAP banners? I've prepared a test banner file set, based on the example banners on Greensock's site, and the administrator is unsure how to use it. What are the best practices for serving GSAP banners? Thanks!

I'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. http://codepen.io/rorytawn/pen/OVeWNB

Hi there. I'm working on an ad (can't share the actual images for) The behavior is different in IE9 from all other browsers. (i don't have access to test on anything above IE9) I haven't encountered this issue before. In addition, these are transparent png with drop shadows, the drop shadows fill while it's animating. As you can see from the following code: var i = 0; var a = 1; var d = .5; var d2 = .55; var d3 = .56; var t = .5; var tt = .25; var e = Power2.easeOut; TweenMax.set("#container", {alpha:a, ease:e}); TweenMax.to("#jacket", t, {y:35, x:-20, delay:d, ease:e}); TweenMax.to("#helmet", t, {y:66, x:-14, delay:d3, ease:e}); TweenMax.to("#goggles", t, {x:-105, y:10, delay:d2, ease:e}); TweenMax.to("#boots", t, {y:-6, x:16, delay:d2, ease:e}); TweenMax.to("#shirt", t, {y:-5, x:98, delay:d, ease:e}); TweenMax.to("#shoes", t, {x:-40, y:2, delay:d2, ease:e}); //TweenMax.to("#hat", t, {x:-100, delay:d3, ease:e}); TweenMax.to("#txt1", tt, {alpha:i, delay:2}); TweenMax.to("#txt2", tt, {alpha:i, delay:2.1}); TweenMax.to("#txt3", tt, {alpha:i, delay:2.2}); TweenMax.from("#txt2_1", tt, {y:25, alpha:i, delay:2.3}); TweenMax.from("#txt2_2", tt, {y:35, alpha:i, delay:2.4}); TweenMax.from("#bar", tt, {y:35, alpha:i, delay:2.5}); TweenMax.from("#txt2_3", tt, {y:35, alpha:i, delay:2.6}); TweenMax.from("#cta", tt, {y:35, alpha:i, delay:2.7}); I'm doing tweens on divs moving them based on their x and y positions. Looks great in everything but IE9 as I mentioned above. If you watch for example, the direction the #shirt div moves in any browser and then try in IE9. Moves in the opposite direction. Any suggestions? I tried switching the x and y to left/right top/bottom to no avail. I know MSFT is not supporting IE and I'm trying to guide my work off of 9, atleast, but in the meantime I could use some help. Thanks in advance for any tips.

Hi All, I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error: TweenLite.min.js:12 Uncaught Cannot tween a null target. My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). Here is the code I used that throws the error. TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3}); I'm guessing masks are not supported this way? Thanks,

Hi Guys, I'm having a few issues with a little page turner I'm trying to build. I started with Rodrigo's pen (Thank you ) and modified it to resemble a simple hard book (http://codepen.io/rhernando/pen/vjGxH/) where you click the pages and they turn. It currently works quite well in Chrome, Opera and Safari, but has issues in IE and Firefox. Firefox nearly gets it, but doesn't animate the page shading on the before element quite correctly (using CSSRulePlugin). It correctly shades the first page as it's rising, but fails to animate the second page as it's dropping (that might make more sense if you view the demo in Chrome first, then in Firefox) IE 11/10 ignore the perspective on the .Wrapper element. I've seen that you can keep the perspective in IE by repeating the transforms on the child elements, but this hurts my head when I try to do this with GSAP by setting values using TweenMax/TweenLite. Does anyone have any ideas? I've not tried Edge yet... will give that a go later.

Hi all, In the codepen attached I have a menu prototype that i'm building. As you can see there are a few actions on the hover state of the red open / close button. I have a timeline firing the circles behind the actual hit state and a separate action firing the SVG path state. The thing that's really bugging me and i'm at a serious loss to figure out is that once you click the open button and the timeline to open the button fires - the hover state stays in the position the button was originally (unless you move the cursor then the SVG goes back to it's normal state and the timeline to show the circles reverses. I'm not sure this is directly a GSAP question, but if any of you kind souls could please assist me - i'm going crazy here! Cheers

Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!

Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P

Hello all, I wasn't sure where to put this so i'm just going to leave it here, please move it if it's in the wrong forum! I work as Senior designer at Sony Music UK and we recently launched our new official website that is powered by Greensock. In fact I now use GSAP on every artist website or web application that we build in house. GSAP has truly revolutionised the way we are able to work, so thank you very much and keep up the good stuff! Below are a few of our recent projects using GSAP. Loads more coming before the year is finished too http://sonymusic.co.uk http://alexadairmusic.com http://little-mix.com http://calvinharris.co.uk http://bmthofficial.com

I've read through the docs but couldn't find anything relating to this in there. Is it possible for us to trigger functions or other tweens whilst dragging in draggable? For example if you started dragging, the container would tween to an opacity change or the cursor would change whilst you were dragging then change back when you let go. I've attached a pen I have that uses draggable if it's any help to work with. Thanks!

Hello, I'm developing a banking app where users can transfer money, pay bills, etc. The app is entirely free to download, no ads or something like that. What license should I use? And do I need a bussiness license if the user is charged a little amount from the amount he want to transfer, like paypal. Thanks!

Hi there. I'm using TweenMax to do position tweens on divs containing text that is styled using a font family from google fonts. The font weight is bold. I find on Firefox and Safari, the font seems to change weight during the tween. Is this a known bug? (don't have time to put together a codepen at the moment but will if needed)

I am using TweenMax to do a simple animation on slides, which looks like this: TweenMax.to(slides, 1.2, {y: (-100 * slideNum) + '%', ease: Power1.easeInOut}); I can see in google dev tools that layout is invalidated and recalculated for each update when using this function, but the translate css property should not need to recalculate the layout but only use composition. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Is this a bug, a sideeffect to animation using js or just me misunderstanding the concept completely

Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.

Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ jQuery(document).ready(function(){ // place custom JS here console.log("DOM ready"); // window, links, and other assets loaded jQuery(window).on("load", function(){ // or place custom JS here to make sure DOM is ready and the window is loaded console.log("window, links, and other assets loaded"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran

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