Search the Community

Showing results for tags 'js'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 88 results

  1. jonForum

    kill animation, am not understand.

    hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) {, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut });, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) });, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) });, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => {, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => {, 1.2, { x:, y:, ease: Power4.easeInOut }); }); visual help .... thank for help
  2. marc1311

    No errors but still no animation

    Hey so I'm currently making an animated graph to show how often I skip a song on Spotify. All I'm trying to do right now is bring in "Spotify" however no animation plays despite chrome dev tools saying there is no error. Also, I commented out line 209 in my HTML because for some reason it cannot link my DrawSVGPlugin. If anyone can help with one or both of the problems I'd greatly appreciate it; thanks.
  3. Hi! If I use multiple times without a variable reference //var myVar = TweenLite.delayedCall(); TweenLite.delayedCall(); If I do not call the .kill(), it will increase my memory? Or the delayedCall() have an onComplete() Event to be able to kill() after the calling.? I use the delayedCall() in a loop multiple times with different parameters... Thanks a lot.
  4. Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward. What I think is a size animation, so they get bigger based on trigger points on the screen. But what the heck do I know?? Theres so much info out there I'm bamboozled. So what do you think - scrollmagic? gsap? Where do I even start yo?! Advice please!!!
  5. WarenGonzaga

    Is it possible to make a game using GSAP?

    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: Thanks heroes!
  6. Frunky

    Add hover animation to each image

    Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. Important note: In this example hover works, but I need to copy animation effect, which works on page load, to hover event. The default hover animation isn't correct for me. Thanks This is example in codepen with default animation Init script var spriteImages = document.querySelectorAll( '.project-image' ); var spriteImagesSrc = []; for ( var i = 0; i < spriteImages.length; i++ ) { var img = spriteImages[i]; spriteImagesSrc.push( img.getAttribute('src' ) ); } console.log(spriteImagesSrc); var initCanvasSlideshow = new CanvasSlideshow({ addCanvasTo: '.canvas-wrapper', canvasStyleClass: 'canvas', stageWidth: 500, stageHeight: 500, sprites: spriteImagesSrc, displacementImage: '', centerSprites: true, interactive: true, interactionEvent: 'hover', autoPlay: false, autoPlaySpeed: [10, 3], displaceScale: [200, 70], }); I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX =; mouseY =; displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); }; slidesContainer.pointerout = function( mouseData ){ displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } This is example in codepen with animation on hover Also I need to load all items, but loads only one item. Why?  I need to make loop with initialized script? I think it's a bad idea. Thanks
  7. Stagnax

    Invoking function on scrolling

    Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .
  8. POST RESOLUTION EDIT: For anyone who may come across this, I was able to find a solution to this issue without the need of ScrollMagic. Should you want a vanilla JS solution, continue down the thread! ---- Hi there. I have a responsive site where I want the content to stagger reveal as the user scrolls. The issue I'm having is that on load, the first few items (depending on screen height) are above the trigger and therefore just animate in together as opposed to staggered. Is there a way to have it so that the content that loads immediately staggers, and then the remaining elements animate like normal on scroll via ScrollMagic? ScrollReveal has a pretty good example of what I'm going for, with content staggering in on load, followed by then animating the lower elements in on scroll. Thanks!
  9. 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
  10. imkopkap

    How to make Website like this?

    I try to copy this website to study and I found that my fonts are not smoothly. I would like to gain your suggestion how to make website like this. Thank you, Kopkap.
  11. raizo

    Ink transition with gsap

    Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
  12. Hello, This it's my first try with GSAP and I'd need your help to understand how should I think to solve the animation process. I want to achieve Violet water drop falls down on black background Then letters start animating - For extra effect I would break "V" letter into two paths so both lines they can get animated simultaneous. My problems: My main problem is how to control timing and control visitability of these paths or groups via js How can I hide cyan letters on the beginning and start with letters animation when the water drop falls into place? In load animation part: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%"}, 2); It seams I cant add delay parameter into the function like: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%", delay:"2"}, 2); In on click function I don't understand why violet drop isn't animating. If possible I would first have Violet water drop falls V letter gets animated then this animation is taken to the next left and right letters so that whole "logo" is reveald.
  13. Novice

    Slider navigation

    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
  14. 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.
  15. 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
  16. 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
  17. Tamas

    How to use Draw SVG Plugin

    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
  18. 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!
  19. 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?
  20. Hi, I was using these two scripts in my HTML5 banner ads: <script src=''></script> <script src=""></script> I had to put these two banner ads through google so as per the, I changed the above scripts to: <script src=""></script> <script type="text/javascript" src=""></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
  21. 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 ?
  22. pati

    Add acction to a video

    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: Any ideas of how to do it?
  23. 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=""></script> <script> //my animations </script> ...but I want to load TweenMax.min.js asynchronously and that's the problem: <script async src=""></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!
  24. 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?
  25. icraft-websites

    Callback parameter vars wont work on TweenMax

    Hey forums. Iv'e run into an issue when passing data into a scroll event listener to fire a callback with preset variables. The 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.