Search the Community

I have a question on the SplitText and ScrambleText plugins, which were briefly covered in Carl's (awesome) course last week. Is it possible to randomize the order of the animating type? For example, if I am using SplitText to spell "ANIMATE" character-by-character, is there a way to not have it animate 'A' then 'N' then 'I' etc?

I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.

Hi there. I'm trying to call some code on an interaction, for example,on a close button click, but I want the code to execute only if certain conditions are met. I think I might have formatted that portion (the if statements) as AS3 (as that's what I'm more comfortable with). Can you take a look and tell me why my if statements aren't firing? It's a huge piece so a codepen would be tricky to recreate, but here is the code in question, hopefully it's enough to solve: function minimizeShoe() { //TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.to("#panel2_box1", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:0, delay:.2, transformOrigin:"left bottom", onComplete:layerShoe}); TweenMax.to("#panel2_info1", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus1", .35, {y:"+=386", delay:.2}); TweenMax.to("#plus1_2", .35, {rotation:"-=90", delay:.2}); scale1.removeEventListener('click', minimizeShoe, false); } function minimizeJacket() { //TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.to("#panel2_box2", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:167, delay:.2, transformOrigin:"left bottom", onComplete:layerJacket}); TweenMax.to("#panel2_info2", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus2", .35, {y:"+=386", x:"+=168", delay:.2}); TweenMax.to("#plus2_2", .35, {rotation:"-=90", delay:.2}); scale2.removeEventListener('click', minimizeJacket, false); } function minimizeFitbit() { //TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.to("#panel2_box3", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:333, transformOrigin:"left bottom", onComplete:layerFitbit}); TweenMax.to("#panel2_info3", .15, {y:"+=117", delay:.1, force3D:false}); TweenMax.to("#plus3", .35, {y:"+=386", x:"+=336"}); TweenMax.to("#plus3_2", .35, {rotation:"-=90"}); scale3.removeEventListener('click', minimizeFibit, false); } function layerShoe() { scaleText1.style.display = "none"; TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.set("#panel2_box1", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerJacket() { TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); scaleText2.style.display = "none"; TweenMax.set("#panel2_box2", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerFitbit() { TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus1", {css:{zIndex:501}}); scaleText3.style.display = "none"; TweenMax.set("#panel2_box3", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function ifStatements(){ if(scale1.position().y == 0) { minimizeShoe(); } if(scale2.position().y == 0) { minimizeJacket(); } if(scale3.position().y == 0) { minimizeFitbit(); } } function exitHandler(){ ifStatements(); } scale1, scale2, and scale3 are all variables of divs that get moved to the top - I want that checked with the if statement, and then it minimized using the minimize function I've created. It's all working great except the if statements they aren't executing properly. Hopefully this makes sense what I'm asking!

Am using gsap inside createjs/canvas if I have a ball, for example, tweening in diagonally, from top left to bottom right, say, with an easing bounce when it hits the bottom of the canvas, the bounce goes up and down, as I want, but also bounces backwards towards the left, when what I want in this case is for the bounce to go to the right. Is there a simple way to achieve that? Thanks

Hey all, I asked this question on an earlier thread, only to realize it was a poll. So here it goes again: I'm new to using the Celtra platform and know very little JS (more a designer but very familiar with GS for Flash). Is there anyway you can send me the code block that you inserted into the Execute JS event to get you up and running with GSAP In Celtra. Do you add it to the screen you're on, or on a Frame Div? I've tried many options, watched the Custom Development webinar and I still can't seem to get it to work. Thank you in advance! Marc

It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates. I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) .add(box3Timeline); to: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) // this won't animate when there's a duplicate below .add(box3Timeline) .add(box2Timeline); // comment this out and the earlier one will animate But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will. Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!

Hi, guys. I am quite new to GSAP. The system is really solid, however, I ran into a small problem. I am trying to animate the X property of the the main container and text in it. Basically, I want to make a nice slide out menu. THE PROBLEM: The black background slides out really nicely, BUT, the text starts sliding out as normal, but then jumps at the end as if it was skipping something. I cannot figure out what is causing that. I would be really grateful If someone helped me out, because I feel like I am missing something really fundamental here. Here is the code: Codepen: http://codepen.io/arthurleonov/pen/ZbPrLX var menu = $('.js-menu'), menuContainer = $('.menu-container'), menuItems = $('.js-menu-items h3 a'); var tl = new TimelineMax({ paused: true, reversed: true, }); // set new timelinemax // container animation tl.from(menuContainer, 3, { x: '-1000', autoAlpha: 0, force3D: true, ease: Power3.easeOut }) // text animation tl.from(menuItems, 2, { x: '-600', autoAlpha: 0, force3D: true, ease: Expo.easeOut }); // toggle animation $(menu).on('click', function() { tl.reversed() ? tl.play() : tl.reverse(); }); Thanks in advance!

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