Jump to content

Search the Community

Showing results for tags 'tweenmax'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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.
  2. 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?
  3. 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
  4. 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.
  5. 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.
  6. 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 );
  7. 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.
  8. 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
  9. 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);
  10. 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?
  11. 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.
  12. 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 ?
  13. 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?
  14. 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
  15. 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!
  16. 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
  17. 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?
  18. 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!
  19. 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!
  20. Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much
  21. Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?
  22. Hi, I'm struggling to get a basicTweenLight example to work in FlashBuilder. Below is a photo of my code. Notice that I have the 'com' folder in the project folder. Notice the errors I'm getting. Any advice would be appreciated.
  23. mlovett

    Ease on Play

    Hello all! So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear. I haven't really used TweenLite very much, and I have the TweenMax script in my document. So far my code looks like this: var omni = sym.getSymbol("omnibed_side"); var pos = omni.getPosition(); if (pos < '3000') { omni.play(); } else { omni.stop(); } I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated! -mlovett
  24. Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?
  25. I wonder if anyone else got this error on Firefox... NS_ERROR_FAILURE ColorWheel Bug It seems to be a combo of TweenMax and SVG in Firefox in Mac and Windows. Chrome looks correct. There should be two color wheels on the bottom of the screen. Pressing and releasing them should select colors.