Search the Community

Hello. I am in need of serious help with this problem I'm facing. First off let me tell you what I want to achieve with my code. On click of a button at the top-center of my screen, 4 fishes are to be tweened with bezier movements to simulate 'swimming' through water. They have other functions but this is the part that I need to get working. function tweenFish():void { var numY:Array = new Array; for (var count:Number = 1; count < 5; count++) { numY.push(count+8); } numY.reverse(); trace(tweenArr, round); for (var numX:Number = 0; numX < 4; numX++) { var randomStart:Number = (Math.floor(Math.random() * (460 - 140 + 1)) + 140); _difficulty[numX].y = randomStart; _difficulty[numX].x = -50; if (round == 1) { tweenArr[numX] = TweenMax.to(_difficulty[numX], (numY[numX]/round), {bezier:{curviness:2, autoRotate:true, values:[{x:50, y:randomStart+5}, {x:150, y:randomStart-5}, {x:250, y:randomStart+5}, {x:350, y:randomStart-5}, {x:450, y:randomStart+5}, {x:550, y:randomStart-5}, {x:770, y:randomStart+5}]}, ease:Cubic.easeInOut}); } } tMax.add(tweenArr); } This is the function I use to setup the tweens for the fishes. Each fish (set in an array called _difficulty) is given a set x value (offscreen) and a random y value so that each run they will 'swim' across the stage. This works perfectly. In fact, all of it runs perfectly...until I try to run it again. This is my initialization which basically stops the round if the fishes make it off the stage without being clicked (intended functionality). var tMax:TimelineMax = new TimelineMax({onComplete:endRound}); And this is the function it calls. function endRound():void { GoFishing.removeEventListener(MouseEvent.CLICK, fish); while (tweenArr.length > 0) { tweenArr.length = 0; } // tMax.clear(); POSSIBLE CODE? gotoAndStop("endGameResults"); scoreBox.text = "Your score is: " + points; gameResultsBG.width = 1; gameResultsBG.height = 1; TweenLite.to(gameResultsBG, 1.5, {scaleX:1.1, scaleY:1.1}); TweenLite.to(gameOverText, 3, {autoAlpha:1}); TweenLite.to(playAgain, 2, {visible:true}); timerX.stop(); timerX.removeEventListener(TimerEvent.TIMER, clock); playAgain.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { MovieClip(root).gotoAndStop(1); GoFishing.addEventListener(MouseEvent.CLICK, fish); round = 0; } ); } Don't mind the commented line at the top. Anyway, this function leads to frame 2 where it's an end-game screen and it allows you to retry. 'playAgain' would take you to frame 1 and play the tween again when the button at the top is clicked, or so I thought. This is where the fishes are frozen off screen (I expanded the window and saw), and they do not move when the function is called, BUT the timer for the timeline STILL RUNS. Know why? The timeline takes 10 seconds to run each time at first. On the second run, 10 seconds pass and it leads me to the end-game screen. So clearly the timeline is running as I would expect it to, but the fishes aren't being moved. Is there something wrong with my code here? Do I need a different approach? Also I just thought of this: Would disabling these fishes, or switching to another frame at any point mess up the tween functionality? Thank you for your help.

Is it possible to animate object on circle path using Circlepath2d, but also transform it around its center? How to combine: path = new CirclePath2D(settings.x, settings.y, radius); or path = new RectanglePath2D(setting.x, setting.y, setting.xEnd - setting.x, setting.yEnd - setting.y); or path = new LinePath2D([new Point(setting.x, setting.y), new Point(setting.xEnd, setting.yEnd)]); follower = path.addFollower(item); TweenMax.to(follower, settings.duration, { progress:1 } ); With: TweenMax.to(item, settings.duration, { transformAroundCenterStarling: { x:settings.x, y:settings.y, scale:toScale}} );

Hi, Here my problem, I use a small semantic template engine (transparency) and I can't make my TimelineMax works on elements that being templated. I guess I done something wrong, but I don't manage to make work my "staggerTo(.MyClass)" that is into my timeline and don't find any fonction to reload the selector or something like that. I give you a codepen of the problem. If any of you have sugestions Allan

Greetings, I have a TweenMax that is has x initialized to 1332px. It's a simple animation from left to right along a 1332px long div. var tl2 = TweenMax.to(document.getElementById('point'), 1.5, { //x:0, y: 0, //repeat: 1, //onRepeat: playSound, yoyo: true, repeatDelay: 0, ease: Power0.easeNone, paused: true }); x gets set dynamically based on width of screen. At some point i'm rotating the div within which it runs by about 20 degrees so it can run from bottom left to upper right corner. To do than I'm trying to 1424px (just for the sake of argument, that's what I'm getting on one particular laptop): var pwa = $('.pointWorkArea'); pwa.css({ 'width' : someCrossLengthInPX /* change the width of div where animation runs */ }) .css({ 'transform' : 'rotate(' + eyeBaller.settings.crossAngle + 'deg)' }).css({'left' : -pwa.position().left}); tl2.updateTo({ x : someCrossLengthInPX }); ... however, I'm not seeing the change in DISTANCE the animation runs at. It rotates fine, but keeps running at the old side to side distance and not corner to corner. Any ideas?

Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.

I was attempting to use GSAP with Node.js, but I encountered some difficulties i could not manage to solve on my own. I am using the GSAP supplied by NPM (https://www.npmjs.com/package/gsap). I have read the other questions asked on this forum and tried their suggestions (http://greensock.com/forums/topic/7422-using-tweenlite-timelinelite-server-side-with-nodejs/), however, GSAP still throws an error saying that "document" is not defined. Help would be much appreciated

Hey guys, first of all i wanna say thanky you very much @ the GS Team, for this awesome libary. Im pretty new to Javascript and programming overall, did watch some Javascript Tutorial and did read a litle bit about it. Did only work with HTML and CSS before (animationwise only with transitions). Basicly im trying to learn Javascript to code a Slotmachine, a pretty complex one (which has a working php script and did work in flash before), but unfortunatly flash isnt the best for mobile devices, so i guess going with Javascript is the way to go. As i said im new to Javascript, i did code a basic Slot this night. Which does not more then spinning the reels on a button click with random symbols appearing, i did not try to connect it with php yet (ill do this after it works as it should). My Slot got 5 Reels with 3 Symbols each reel (at all it got 6 Symbols for the animation per reel, as im resetting the position for the reelanimation after the 3 symbols are out of the viewfield of the reel.) So, i got this working with a semifluid animation, but my problem is the animation lags (probably cause alot of things are done at the same time) at all im moving 30 125x125px divs at the same time + changing the symbols. My code for this is about 400lines long, (could be much shorter if i optimize it). Im wondering if there is a posibility to do such a complex animation without lags just with JS and GSAP, or is it in this case nessecary to go with Canvas? If you think that it is possible to get a smooth working slot, which solution would you use? regards houseshow Gonna give it another try, with another idea which i had and will post a codepen link, after im done. Maybe you can give me some hints afterwards.

Hello and thanks and congratulation for this amazing tool. Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working: http://codepen.io/Rofizzle/pen/myGyJM So, I ended up using a snippet from a greensock demo, because that was exactly what i wanted, however i have never managed to make the reverse method to work, and use another tween to make stuff go in or out, with statements. Is there any way to clean that code with solid reverse method?

After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax

Greetings! I have my first TweenMax doing everything i need, (including interaction with externals controls/buttons) but I'm drawing a blank as how to prevent it from 'autoplay' My relevant 1liner: var tl = TweenMax.to(point, currentSpeed, {css: { left: "95%"}, repeat:repeat, yoyo:true, repeatDelay:0, ease:Linear.easeNone}); ... so for example my 'pause' button works fine: $('#pause').click( function(){tl.pause();}); ... how do I make it start only when I press my $('#start') button? I figure I missed something simple, hence my apologies and thanks in advance.

Is it possible to tween an object's property if the value of the property contains units (px, %, em, etc)? See code pen example. I'm expecting myObject.left to have a value of '200px' after 5 seconds.

Is there a way to delay the start of a TweenMax, similar to a setTimeout ? setTimeout( function () { TweenMax.staggerFromTo( $box, 0.3, { y: 0}, { y: -100}, 0.10); }, 400 );

So I have 2 problems here, 1. For some reason, the rotation seems to reverse its direction for one of the increment upon completing a full circle. Currently I intend to have the circular blob move through every 30 angles on clicking the button. 2. When I click the button again during the transition, it resets the transition instead of chaining it. I was trying to find ways in which I can chain the animation so that it doesn't reset but allow the user to continue onto the next item. Thanks for any help in advance.

Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex

I want to create a wave movement. A couple of boxes jump up and down one after the other. FromTo does not lead to right result, because the boxes don't go to their previous position. TweenMax.staggerFromTo(".box", 1, { opacity: 0.6, y: -20 }, { opacity: 0.2, y: 0 },, 0.2);

So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?

I am implementing a web page with Parallax scrolling. I have referred a code from net. Here, I am having html { overflow: hidden } which is preventing me to smooth scroll to a particular div in my HTML. I tried using GSAP, but html { overflow: hidden } is not allowing to get the desired effect. But when I remove it, scroll works perfectly but, parallax effect doesn't happen. Following is my code for reference. Please someone help & let me understand the reason behind it. CSS @import url(http://fonts.googleapis.com/css?family=Nunito); html { height: 100%; /* OVERFLOW HIDDEN NOT ALLOWING JAVASCRIPT SCROLL */ overflow: hidden; } body { margin:0; padding:0; /* perspective: 1px; transform-style: preserve-3d; */ height: 100%; overflow-x: hidden; font-family: Nunito; } h1 { font-size: 250%; margin: 0; padding: 0; } p { font-size: 140%; line-height: 150%; color: #333; } .slide { position: relative; min-height: 100vh; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; } .slide:before { content: ""; position: absolute; top: 0; bottom: 0; left:0; right:0; } .title { width: 50%; padding: 5%; border-radius: 5px; background: rgba(240,230,220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7); } .slide:nth-child(2n) .title { margin-left: 0; margin-right: auto; } .slide:nth-child(2n+1) .title { margin-left: auto; margin-right: 0; } .slide, .slide:before { background: 50% 50% / cover; } .header { text-align: center; /*font-size: 175%;*/ color: #fff; text-shadow: 0 2px 2px #000; } #title { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg"); background-attachment: fixed; } #title h1 { padding-top: 80px; } #slide1:before { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide2 { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg"); background-attachment: fixed; } #slide3:before { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide4 { background: #222; } .fixed-header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1; text-align: center; color: #fff; } HTML BODY <body> <div id="scroll" class="fixed-header">CLICK HERE TO SCROLL</div> <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide3" class="slide"> <div class="title"> <h1>Slide 3</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide4" class="slide header"> <h1>The End</h1> </div> </body> JavaScript <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/plugins/ScrollToPlugin.min.js"></script> <script> (function() { var $ = function(selector, el) { if (!el) {el = document;} return el.querySelector(selector); }, $$ = function(selector, el) { if (!el) {el = document;} return el.querySelectorAll(selector); }; $('#scroll').addEventListener('click', function(e) { // GSAP CODE var posTop = $('#slide1').offsetTop; TweenLite.to(window, 2, {scrollTo: posTop}); }); }()); </script> Kindly help.

I use different tween function at different points of a script; to clean code a bit, Id like to define things a bit more globally. It might be an obvious question, but I could not find a clue about how to define the easing used in different tweenmax actions as a global variable. Does it have to be accessed or defined specifically ?

Hey everyone so I know that tweenMax has a onComplete function but I was wondering is there anyway that I can setup a tweenMax or tweenLite function to only run 30 intervals of my stages frames per second then once finished call on the onComplete function? I have a movie clip object that is added to the stage every 0.8 seconds and what i wanted to do was when my character picks up a powerup I wanted to have the movie clip object added to the stage every 0.1 seconds but only for a couple intervals or like say 5 seconds then I wanted to put it back to its original time. Is there anything that the tween engine offers to call on a onComplete function for this?

Hello (first of all sorry for my poor english...) I want to stop my animation (drawing svg path using timelineMax and TweenMax) at the end, I try several things but nothing works... My code looks like this : var tween = new TimelineMax() .add(TweenMax.to($path1, 2.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path1 for 2.5 .add(TweenMax.to($path2, 1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path2 for 1 .add(TweenMax.to($path3, 1.2, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path3 for ... .add(TweenMax.to($path4, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path4 for ... .add(TweenMax.to($path5, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path5 for ... .add(TweenMax.to($path6, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path6 for ... .add(TweenMax.to($path7, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path7 for ... .add(TweenMax.to($path8, 0.3, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path8 for ... .add(TweenMax.to($path9, 0.2, {strokeDashoffset: 0, ease:Linear.easeNone})); // draw path9 for ... someone have an idea ? Thank you ! Thomas

Hi everybody, I've been successfully using GSAP for a while now and I am absolutely in love with it-as a side note I've developed a front-end UI animation pack for it which I will share with the community soon-but I'm struggling to get scrollToPlugin working. I am using the correct syntax, and I'm currently using requireJS to bring through the scripts as dependencies, with scrollToPlugin being loaded from cdnjs *after* TweenMax. Whatever I do, I keep getting the error: Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 1 present. I really have no idea what could be causing it anymore. My scroll syntax is: TweenMax.to(window, 1, {scrollTo : { y: 500, x=0 }, ease: Power1.easeOut }); This is executed when a button is clicked. Wonderful community, please help me!

Hi, i am using scrollmagic but i hope someone here can help me i tried to pin a section which contains an image which gets fadeIn while scrolling. This works fine, but when i scrollUp, the image changes its opacity a couple of times very fast. testet in lastet chrome thanks for any advise or help

How to integrate Angular property (.ng-hide-add and ng-hide-remove) in GSAP? Scenario: I have a div say "demo", I have four different partials which will append to "demo" by clicking four different tab. I need to animate "demo". So each time i click a tab partials gets appended to "demo" div. I need to use GSAP for ".demo.ng-hide-add" and ".demo.ng-hide-remove". How can i achieve this in GSAP?

Tweenmax team: First of all, amazing js, I just love it. I need help with a code that I'm actually working, it's just a Color picker that changes background colors with a bar with no position (an sliding bar), and this bar just changes the background color with hex codes. I need to know if there's a way with Tweenmax to do a smooth transition of the background with the new hexcodes. Thanks in advance, and sorry for my english, It's not my mother language. Regards!

Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!