Jump to content

Search the Community

Showing results for tags 'js'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I'd like to say hello to everyone at the beginning. I'm a novice in JavaScript world and I have a question. I tried to create navigation for my first GSAP slider and I have no idea how to get started. I'd be grateful for all the tips. Regards, Novice
  2. Been holding out and feel like a n00b all over again, desperately awaiting making the transition from Flash to JS/HTML5 but not clear on how to capture and manipulate BitmapData yet. Capture Image Data I have to capture Image Data for things like cropping a composition of multiple custom user-placed images/text/graphics and export it / save it to the server at the end of my drawing application (currently only in Flash and needing to port for mobile). I can handle the writing to the server with a PHP API easily, but how to capture image data and send in the best way....... that's where I'm foggy without my trusty beloved AS3 BitmapData() and Bitmap() classes and their killer functions. Short and Sweet? $('#someElementOrCanvas').drawBitmap(w,h,matrixTransforms); // or similar would be (more than) cool. GSAP Alone? Is this GSAP library already there now to help do this kind of image data stuff? GSAP + ____ .... Raphael? Or, does another library come to mind that would play nice and plug in lightly with this to accomplish bitmap data capture or draw functions with transforms, or am I getting too needy already for this version of GASP/JS? haha RaphaelJS? Other? Thanks a lot.
  3. Hi, Just a neat little thing I discovered today, when using a calaculation in JS with the a possible output of 'NaN' you can prevent errors like this: var newWidth = value1*value2; TweenMax.set(element,{ width:newWidth || 0 }); Hope this helps someone out, regards, Ivo
  4. Hey guys ! I've been trying to make this slider for the couple couple of days without much success. I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. Here is a snippet of my js. $(".right-arrow").click(function() { var contentSlides = $('.slider .slide'); var currentSlide = 0, tl = new TimelineMax(); tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10} ); if ( currentSlide < contentSlides.length ) { currentSlide++; } else if( currentSlide == (contentSlides.length -1) ) { currentSlide = 0; } tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 100% 0 0)", x: -40}, {webkitClipPath: "inset(0 0 0 0)", x: 0} ) }); Thanks in advance
  5. I have simple question. When I going to use the Draw SVG Plugin does it work like, that I have a svg illustration and I drag it into the plugin and the plugin will create the path code and animation as well? The plugin automatically convert the svg into js path codes? So I don't need to write the illustration lines in js? I'm quite beginner so hope it's clear what is my question! Thanks in advance for all advice
  6. I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!
  7. 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?
  8. 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
  9. 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 ?
  10. 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?
  11. 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!
  12. 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?
  13. 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.
  14. 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
  15. 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!
  16. 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.
  17. Hi every one. What do you think about snow animation into a wheels? See attached picture. Which library can i use?
  18. 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
  19. Hello everybody! I'm not very comfortable with the notion of beginning from which the animation starts when an element is visible in the page while scrolling. How to handle this easily? When starts exactly the animation of an element once it appears on the screen by scrolling down the page? Going further, I have done some tests with animations where the duration is expressed in seconds once started, but what if I want that the animation of my element be based on the scrolling of the page, in both way, normal and reverse? I try to find answers from http://johnpolacek.github.io/superscrollorama/ and http://www.greensock.com/timelinelite/ but without success... I'm a graphic designer, so be gentle - please - animate through code is pretty lethal to me Oh, and by the way -> GreenSock technology rocks!
  20. something similar that you can use Gsap, delay function TweenMax.delayedCall(6.5,frame04);
  21. 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!
  22. 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/
  23. squxd

    SVG Hover Animation

    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)
  24. 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!
  25. 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