Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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. 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( 'TweenMaxM
  2. 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>
  3. 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.
  4. 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 th
  5. Hey guys, Quick question that's been bothering me. Is there any way to have multiple values for repeatDelay? Example: Animation plays for 5 seconds 2 seconds delay Animation plays for 5 seconds 5 seconds delay ... Thanks, Marko
  6. I've been working on a project for several months now, and had been using an older version of GSAP for animations, largely to scroll the site up and down to specific sections when the user clicks the navigation. I recently updated from beta 1.5 to the latest ( 1.8.2 ) and noticed that the site no longer scrolled properly: the scroll animation will start and get about 20-50px and just stop. This only happens in Safari/ML 10.8.2. I used BrowserStack to version test, and Safari 6.0.2 in Lion works just fine. To debug, I set an onUpdate function to log the $( window ).scrollTop(), and it
  7. I am trying to achieve something like this http://www.puma.com/mobium/ Where it only animate when you scroll. I figured it uses mousewheel jquery and tweenlite. I managed to make the animation play on scroll, but I am having problems trying to make the animation play backwards. I am using this line of code to make the animation: TweenLite.to('#animation', 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase}); Also, how do I make the animation actually play a number of frames on one scroll, rather than playing the whole animation on one scroll. EDIT: I ma
  8. Hey guys, I'm using TweenLite's ticker to provide my game with a loop I can use for updating the physics. To make my game framerate independent I need the delta time (DT). The docs suggest the callback receives event which I thought might include the DT, however the event is undefined. I can calculate the delta time myself however I was hoping it would be available. For now I can do this... var previous_time = 0, current_time, dt = 0; TweenLite.ticker.addEventListener("tick", function() { previous_time = current_time current_time = TweenLite.ticker.time dt
  9. New to gsap and js, trying to implement delayedCall in my slider like in the Bassta tutorial (http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/). I am running into difficulty trying to killTweento when clicking on 'prev' or 'next'. clearTimout seems to work from the original code (http://tympanus.net/codrops/2013/04/17/background-slideshow/); however, I would like to utilize gsap for this, so I can use sizzle or some other selector engine, instead of full-blown jquery. (My attempt at killTweenTo is commented out in the code) http://jsfiddle.net/gregorygard
  10. I know that it might be hard (if not outright impossible) to achieve what I want, but gsap always surprises me (I used it back in as3) that I think it's worth it to ask. Is it possible to animate a div parent exclusive of the child? What I mean by this is let's say I have a div like so: <div style="colored-rectangle"> <p>My Content</p> </div> See the div is a 'colored-rectangle'. I want to animate my text and the colored rectangle separately from each other. I'm using TweenLite.from();, and I want my text to appear from the top while the div comes in from
  11. Hi to all! my name is Patrizio, i have a question and hope find here a solution at my problem:) some year past have work to animation along bezier path in flash ... the anim figure a ship navigation. the page is here. now i want make a conversion of site frontend from flash to javascript. from cms data I get a path serie like this : path0= [{x: 530.1 , y: 115.7 }, {x: 538.65 , y: 119.35 }, {x: 536.8 , y: 126.6}, {x: 534.95, y: 133.9}, {x: 521, y: 135.45}]; path1= [{x: 519.9 , y: 135.55 }, {x: 523.1 , y: 144.4 }, {x: 523.6 , y: 154.5}, {x: 524.15, y: 164.65}, {x: 523.1, y: 17
  12. Hi all! I need help with this, I have tested in Chrome, Safari, Firefox, and IE9+ and works magically. But when I tested in IE8 specifically, the animation breaks. I have tried everything I could came up with but I'm stocked. Demo Link: http://theoremcreations.com/undertone/16002/ss/demo/ CodePen Link: http://codepen.io/anon/pen/lnIHg Animation_Demo.zip
  13. So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems
  14. Hello, I'm just getting into animating without the traditional timeline. I mainly worked on banner ads and was very efficient at creating dynamic ads within the tight constraints of 40-60k files. I'm quite nervous about what direction to take. I desperately want to start learning JS HTML5 animation but have a concern that I will run into many clients that need flash only. I felt the warm embrace (ease) of flash for too long. Now I feel I'm in the wild wild west again. A couple questions. 1. Can you develop JS and convert to flash if needed automatically? 2. I know JS and AS3 are clo
  15. I'd like to tween a CSS value, say a div background color, through multiple colors based on scroll position -- as if I could set up a gradient of colors (for instance a spectrum/rainbow). My thought was to set up tweens on a TimelineMax and then check on each scroll update as to percentage scrolled and seek to that percentage position on the TLM. I can do the grunt work, but I'm curious to know whether using TLM in this way would even be possible -- any help appreciated --
  16. Hi, The plugin example page is a great way to test parameters, http://www.greensock.com/tweenlite/#plugins. Specifically, I am working with Physics2d. Is there a page that shows the example as a JS file as opposed to Actionscript? Am I missing something?
  17. I am using TweenMax with Adobe Edge Animate, and I am trying to rotate a div to zero degrees from various starting points. If I set rotation equal to any positive or negative number, the div will rotate to that value. However, if I set rotation equal to 0, the div will not rotate at all. Is there a secret to this that I am missing? Here is a sample where photo1 is the div. It is a photo that is on the screen and initially at a -24deg rotation. I want it to move to the coordinates listed while rotating to 0deg. TweenMax.to(photo1, 1, {top:215, left:240, rotation:0, ease:Power1.easeIn
  18. Hi all! I come from using TweenMax for AS and have now been tasked with creating a slide presentation with audio without using Flash so it can be viewed on ipads etc. Here are my tasks. I have a narrator discussing different slides much like a powerpoint presentation. Each slide could potentially have its own bulleted animations synced with the audio. Each slide progress automatically. The user can scrub forward or backwards and there is a time-code. I have built one already using timesheets.js but it only allows for slide to slide animations not animations within a particular slid
  19. I'm trying to randomize some settings in a tween. The first time it gets random values, but each iteration thereafter is identical. function RandomTween(e,o,w,h){ TweenMax.to(e, 0, {x:(int(o.left*w)), y:(int(o.top*h)),rotation:getRandomArbitary(1.05,6.25)+"rad"}); TweenMax.to(e, getRandomArbitary(0.5,5), {y: o.animation.to.y*h,repeat:-1,x: o.animation.to.x*w,force3D:true, rotation:getRandomArbitary(1.05,6.25)+"rad",ease:Linear.easeNone,onComplete:function(e,o,w,h){ RandomTween(e,o,w,h); },onCompleteParams:[e,o,w,h]}); } /** * Returns a random number between min and ma
  20. If I have a set number of coordinates, say a user draws an s-curve with their mouse/finger, what would be the best way to tween an object along the same path? I can loop a bunch to TweenTo calls but I'm wondering if there is a better way? A plugin maybe that helps with this? Thanks for any suggestions.
  21. I recently started using GSAP for animating three.js as an alternative to https://github.com/sole/tween.js, commonly used for this. It made it really easy to do something like: make a cube spin and when it stops, wait until one of the faces are square (through a 90 degree rotation with repeat -1 switched on/off). However, I'm struggling with severe performance issues in tweening many objects at a time. I think this has to do with having to create a duplicate copy of the objects to store the tween data rather than just being able to directly tween object variables without having to write
  22. Hi everybody, First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English). i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation. The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be
  23. My colleague had scaled a DIV container with text/vector graphics. It looks super sharp on a retina screen in firefox, but on a regular monitor he has connected it looks blurry. For me it looks like on the retina it has scaled the fonts, but on the regular screen it seems like it has bitmaped and scaled (everything is blurry) Any workarounds? We used Elements inspector to check the width/height after scale and it´s whole pixel values.
  24. Hello, EDIT: I'm looking for 3D Planes in 3D space, like Flash's native 3D planes and like CSS3 3D transforms. Hard planes rotating & moving in X Y Z. I'm looking for some advice on how I may achieve a 3D Image Flip effect using GSAP JS, in the Canvas. The "cards" will be Bitmaps with transparent areas (PNGs) I intend to re-create this: http://www.westfieldbrochure.com That's a small presentation I crated using GSAP JS but in that case I used CS3 3D transforms. I would like to try it in Canvas now. But I have no idea how to start. If you guys could give me some adv
  25. Hi, I am new to GreenSock and trying to use Draggable plug in of GreenSock. I have added the JS libraries in following order <script src="../../../js/jquery-1.10.1.min.js"></script> <script src="../../../js/jquery-ui.min.js"></script> <script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script> <script src="../../../js/greensock/TweenMax.min.js"></script> <script src="../../../js/greensock/plugins/Draggable.min.js"></script> My HTML code structure is as follows: <div id="imageContainer"> <div class