Search the Community

In the attached codepen I have a timeline in which `blocks` stagger into the display. That all works fine and well, but I'd like to make it so that the `autoAlpha` property runs a bit quicker than the rest -- for instance 300ms rather than 600ms. Is there any way of achieving this type of interaction with certain properties within a stagger going quicker than the rest?

Hi, I was using these two scripts in my HTML5 banner ads: <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> I had to put these two banner ads through google so as per the https://support.google.com/richmedia/answer/6307288, I changed the above scripts to: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> After running the code, it throws an error saying that "TimelineMax is not defined". Can anyone please tell me what am I suppose to do to fix this? Thanks

Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?

Hi! I would like to call animation functions only after the external GSAP file is loaded. I could place the animation functions after the link to GSAP file like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script> //my animations </script> ...but I want to load TweenMax.min.js asynchronously and that's the problem: <script async src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> I've googled it and found some kind of solution. The idea is to have a global variable created by the the external script and check whether it exists or not. If it exists, then the external JS is loaded. I found the solution here. So my question is: does TweenMax.min.js create any global variables or objects or whatever I can check the existence of? Thanks in advance!

Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?

Hey forums. Iv'e run into an issue when passing data into a scroll event listener to fire a callback with preset variables. The settings.in.func callback fires repeatedly instead of once and the vars object wont be accpeted in the TweenMax vars parameter. The Code pen link provides this behavior when scrolling down.

Hey, I wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation. I feel that the solution is very easy, and I sit on it far too long to find them. CodePen: http://codepen.io/anon/pen/mOmbza

Hello there, I am trying to call 3 different functions to animate 3 different animation in one shot through init() function. How I can achieve this properly. function init() { TweenMax.set("#object", {alpha: 0}); a(); b(); c(); } function a() { TweenMax.to("#object1", {x: "+=100px"}); } function b() { TweenMax.to("#object2", {x: "+=200px"}); } function c() { TweenMax.to("#objec3", {x: "+=300px"}); } Hopefully I will know the solution as soon as possible thanks gsap masters!

I'am trying to get general idea how to get current value of rotation on a div object using Draggable rotation property. Any help would be appreciated.

Hi every one. What do you think about snow animation into a wheels? See attached picture. Which library can i use?

Hi, I am new here and new to greensock as well. One of my friend referred me to this awesome kit. I want to create an animation where there will be 2 different images (similar like before and after image effects with color and black & white image) but unlike, here it will be 2 different images and not a grayscale (so css property may not work). The second image will cover up/load circular motion. here is the demo I created http://codepen.io/bgthedev/pen/wzrGxJ/ In this demo the problem is, as you see, it is noticeable that I have used 2 separate images which is not proper. Is there a way to create such animation? except clip-path because that does not work with firefox Thanks in advance! BG

is there anyway to set timeline duration regardless of each tween duration in timelinemax? i used this trick tl.set({}, {}, 15); but it only works when time line length is less than the new value

Hi guys! I want to share my work on how to make a venetian effect using GSAP I hope it will help other guys on their animation! You can freely fork this project on codepen! thanks! Any feedback and improvements are welcome! Codepen Link: http://codepen.io/Waren_Gonzaga/pen/akywzY Big thanks to Jonathan and Jack of GreenSock for guiding me here! Pretty new here!

HI everyone! I am being active here! I made a simple game using GSAP I know it is possible but it is really hard to code a game using GSAP alone.. can you guys which part of gsap I am going to use if I want to make an awesome game using GSAP! Pen Link: http://codepen.io/Waren_Gonzaga/pen/dMpjMy Thanks heroes!

Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/

1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the correct placement within the file. (I have tried 'cropping' the SVG of "X" and "A" but the position/location is off. Question: - can I set a rotation orgin point manually? or do you think I should even be using more JS/GSAP to accomplish these effects? *There are actually even more interactions I have thought up - however they can wait until this problem is resolved, Thanks for ANY & ALL help! (I haven't found many examples of SVG hover animations)

After i uploaded the .zip file to the browser it shows 3 errors 1-Missing Primary asset check 2-Relative asset check 3-secure URL check I used Edge animate And in the creation complete i used "" var mobile = sym.$("mobile"); var logo = sym.$("logo"); var t1 = sym.$("t1"); var bx1 = sym.$("bx1"); var buynow = sym.$("buynow"); TweenLite.from(mobile, 1, {y: "30",alpha:0, delay:1,ease: Back.easeOut }); TweenLite.from(logo, 1, {alpha:0, delay:2,ease: Sine.easeOut }); TweenLite.from(buynow, 1, {scaleX:0,scaleY:0,alpha:0, delay:4,ease: Elastic.easeOut }); TweenLite.from(bx1, 1, {x: "30",alpha:0, delay:2.5,ease: Back.easeOut }); TweenLite.from(t1, 1, {y: "10",alpha:0, delay:3,ease: Back.easeOut }); "" i need help please !! I can't understand what to do ?

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!

Ok, so I'm making an animation of blown leaves with gsap. This animation is triggered by a link click, and after the animation finished, should redirect user to the link in the clicked link. Animations works fine, no error in console, and no unexpected behavior happening. but the redirection (happens on onComplete) happens in random time. I'm using endTime() to get the total time needed for the animation, but the time returned ranged from 4s to 20s to 30s, and this causes the redirection happens in random time (sometimes quick, sometimes super long time has passed). Since I set the leaf animation timeline (leafTL) duration to 2s, I expect the endTime() to return 2s or maybe 3s (with the start delay), not 4s~30s. Can someone explain to me why this is happening? I'm new to gsap, so maybe I misunderstand or miss something... CODEPEN Sample My Code // ================================================= // LEAF PARTICLES // ================================================= // Global variable related to leaf particle var $leafEmitter = $('#emitter'), isRepeat = 0; // Variables holding bezier paths for animation var leafPaths = []; leafPaths.push( [{x:0.396,y:116.115},{x:37.471000000000004,y:68.14599999999999},{x:67.613,y:121.484},{x:108.874,y:68.14599999999999},{x:148.695,y:16.667999999999985},{x:185.84699999999998,y:68.58699999999999},{x:234.515,y:0.28999999999999204}] ); leafPaths.push( [{x:0.396,y:116.115},{x:18.934,y:92.131},{x:56.778,y:99.253},{x:88.653,y:88.261},{x:111.48700000000001,y:80.387},{x:124.873,y:55.977999999999994},{x:108.732,y:45.742},{x:75.61099999999999,y:24.738999999999997},{x:60.229,y:61.852},{x:79.598,y:71.332},{x:96.195,y:79.455},{x:126.293,y:76.33699999999999},{x:141.219,y:65.42999999999999},{x:157.659,y:53.416},{x:148.864,y:41.95199999999999},{x:170.149,y:28.41899999999999},{x:187.238,y:17.553999999999988},{x:220.392,y:13.20999999999999},{x:229.597,y:0.2909999999999897}] ); leafPaths.push( [{x:0.396,y:116.115},{x:23.165,y:88.873},{x:37.164,y:97.1},{x:68.165,y:88.873},{x:101.58200000000001,y:80.00500000000001},{x:100.202,y:60.97200000000001},{x:122.11800000000001,y:59.915000000000006},{x:157.49900000000002,y:58.21000000000001},{x:165.517,y:37.206},{x:179.16500000000002,y:30.873000000000005},{x:201.39200000000002,y:20.560000000000002},{x:206.49800000000002,y:22.206000000000003},{x:234.51500000000001,y:0.29000000000000625}] ); // Extend Math function to enable random from given range Math.randMinMax = function(min, max, round) { var val = min + (Math.random() * (max - min)); if( round ) val = Math.round( val ); return val; }; // Function to create a leaf particle function leaf(id){ var idx = id || 0, pathsTotal = leafPaths.length, $leaf; // create new DOM element - the leaf $leaf = $('<div id="particle'+ idx +'" class="leaf leaf'+ Math.randMinMax(0,4, true) +'" />'); // append new leaf to its emitter $leafEmitter.append( $leaf ); // create its animation var degree = Math.randMinMax(50, 360), insertionTime = idx * 0.015, dur = 2, sc = Math.random()*1.3 + 0.4, rd = Math.randMinMax(0,1.5), dur1 = dur/Math.randMinMax(0,2.5), resDur1 = dur-dur1, path = leafPaths[ Math.randMinMax(0,3, true) ]; var leafTL = new TimelineMax({ delay: insertionTime, ease: Ease.easeOut }); leafTL.to($leaf, dur, {bezier:{type:"cubic", values:path}, force3D:true, ease:Power0.easeNone}, 0); leafTL.to($leaf, dur, {rotation: degree}, 0); leafTL.to($leaf, resDur1, {scale: sc}, 0); leafTL.to($leaf, dur1, {scale: 1}, (0+dur1)); leafTL.to($leaf, dur/2, {alpha: 1}, 0); leafTL.to($leaf, dur/2, {alpha: 0}, (0+(dur/2))); leafTL.add('end'); return leafTL; } // Function to generate the particles function generateParticles(num){ var masterTL = new TimelineMax(); for(i = 0; i < num; i++){ var particle = leaf(i); masterTL.add(particle, 0); } return masterTL; } // NOTE: End of leaf particle function // ================================================= //Create the leaf here var leafParticles = [], leafEmitterTl = new TimelineMax({ onComplete: leafAnimDone }).pause(); function leafAnimDone(){ /*Redirect User here*/ } leafParticles = generateParticles(5); //generate the particles leafEmitterTl.add(leafParticles); //add particles timeline

Hi all! I have some strange error with ie 11 (may be earlier versions too). Here is a simple example of my code: var gfx_obj = {}; gfx_obj.r1 = 1; gfx_obj.r2 = 1; gfx_obj.r3 = 1; gfx_obj.r4 = 1; function appearGFX(num) { TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut}); } appearGFX(1); So this gives me error in IE only (all other modern browsers is OK). Screenshot of error is attached. Any thoughts how to fix it?

Hello to all! Total noob at GSAP. I'm trying to make a loader (as you can see in the codepen is a carrot), and while it's loading the leaves in top of the carrots will have a wink effect. But I cant figure out how I can make the rotation smoothly! The timeline is: -15deg and then 15deg I tried to add one more tween for 0deg but without success, also I tried the yoyo but the same bad result. With CSS I would just add "alternate" on animation shorthand and "infinite". Thanks

Hello, I'm pretty new to JS, but worked for many years with Flash AS. One issue I'm running into are Linter problems in my code editor "Brackets". My animation runs fine and Chrome also has no errors. But I really would like to get rid of all these Linter probelms showing up. I've loaded jquery and TweenMax libraries in my main html file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script src="main.js"></script> In my "main.js" I have: var videoPanelTl = new TimelineLite(); Now this Linter problem that shows up: "'TimelineLite' is not defined. - W117 -". More problems show up when using "$" , or easing "Back" for example. They all show up as "is not defined". Seems like my JS file doesn't even know that TweenMax has been loaded in the html file? I'm also not getting any code hinting for TweenMax - probably for the same reason. I've searched for many hours on the internet since it seems a pretty basic question but couldn't figure it out. Is there a way to fix this? I would really appreciate any help.

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.

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

I'm an admitted newbie Greensock user/member. I use Edge Animate and have incorporated Draggable into a very simple interactive component. I typically learn with simply trying different things and looking at what others have done. It's steep learning curve thing to do, but I just keep plugging away at it. I'm trying to solve a parent/child issue. I have a larger circle that has a smaller "wedge" layered on top. I can rotate both symbols independently but ultimately I want the lower layer (the larger circle) to rotate the child wedge. The wedge should be able to be moved independently of the larger circle. I'm looking at all kinds of ways to solve this, but thought I'd try asking for help too. The very simple js code is pasted below...it works just fine rotating my "dial" (the large circle) with my "index" (the wedge). Any suggestions would be appreciated as I tinker with the code. I'll upload something to Codepen as soon as I get that figured out too! Thank you for any help or suggestions! Ed /*********************** * Adobe Edge Animate Composition Actions * * Edit this file with caution, being careful to preserve * function signatures and comments starting with 'Edge' to maintain the * ability to interact with these actions from within Adobe Edge Animate * ***********************/ (function($, Edge, compId){ var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes //Edge symbol: 'stage' (function(symbolName) { Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) { Draggable.create("#Stage_dial",{type: "rotation"}); Draggable.create("#Stage_index",{type: "rotation"}); }); //Edge binding end })("stage"); //Edge symbol end:'stage' //========================================================= //Edge symbol: 'dial' (function(symbolName) { })("dial"); //Edge symbol end:'dial' //========================================================= //Edge symbol: 'index' (function(symbolName) { })("index"); //Edge symbol end:'index' })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-3280152");