Jump to content
GreenSock

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

Search the Community

Showing results for tags 'greensock'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. I need to make this event happen a few seconds after page loads. Can someone help? Also, the type weight is normal during transition but is bold as it should be after transition. Why? Thank you!
  2. I am already member of Greensock Club to purchase ThrowPorpsPlugin.js but it has memory leak issue. I have included TweenMax.js, Draggable.js, ThrowPropsPlugin.js and used this code: Draggable.create(".kr-thumb-inner", { type: 'x', edgeResistance: 0.65, bounds: '.kr-thumb-wrapper', cursor: 'pointer', dragClickables: true, throwProps: true }); Any transition didn't start so no moving element, but memory is continuously increasing. When I get rid of ThrowPropsPlugin.js, memory leak issue was gone, but It was always happen until I remove ThrowPorpsPlugin.js even I removed this option: "throwProps: true". Please check Greensock sample page itself. : https://greensock.com/throwpropsplugin It has also memory continuously increasing. You can see the page has that issue if you SHIFT + ESC in Chrome. I really need this plugin but not useful if it has such issue. Please HELP ME!
  3. Hi all .. this is not really something I can make a codepen example of .. But I could really do with a wee bit of help diagnosing whats up please !! The website was created in Adobe Edge Antimate and powered by Greensock .. It was my first attempt at a site away from Flash and had been working happily across platforms ( mobile and desktop ) for over a year and a half .. Now the site no longer works on iOS Chrome and possibly some other platforms that I don’t have access to. I really don’t know how to start diagnosing this .. here is what I’m seeing: - iOS Chrome - Loads the edge animate preloader - Preloader finishes - Site hangs on green screen which is where Greensock should kick in It appears to me that the edge side of things is ok .. but chrome isn’t liking Greensock for some reason .. I may be wrong ?! I have tested on: - mac versions of - Safari - Chrome - Firefox - Opera - iPhone - safari - ALL GOOD - iphone Chrome - ALL BAD I’ve put the site up on my server .. here’s a link: http://www.monkeygonetoheaven.co.uk/for_greensock/IOS-CHROME-PROBLEM/ Would really appreciate if someone could point me in the right direction on how to diagnose what up. Cheers Rory
  4. when i was trying to create a website that uses jquery to link numerous iframes, jQuery('.open_contents').click(function() { jQuery('.board_contents').addClass('slideIn'); }) I found out that iframe cannot communicate with the parent window, and i was able to solve the problem with the following code by adding 'top.document' jQuery('.open_contents').click(function() { jQuery('.board_contents', top.document).addClass('slideIn'); }) but simply addingclass or togglingclass was not good enough for creating the animation that i wanted, so i moved onto Greensock. the question is how do i control specific div layer in the parent window, using greensock by clicking on a button inside an iframe? my code is this : jQuery('.open_contents').click(function() { TweenMax.to(".board_contents", 0.5, {opacity:1, top:200, ease:Bounce.easeOut}); }) my webpage is this : http://lifeto.dothome.co.kr/xe/page_FIsv96 and here is where i am. if you click on the first 'click me' button a board slides down, and then it was supposed to open a layer named '.board_contents' when click on the title '1', but is currently not working. do excuse my horrible english.
  5. Flash was once a passion. It still feels more advanced than HTML/Javascript for interactive projects due to years of developments added to it. Lately though I've become very interested in the possibilities of JavaScript combined with advancements in libraries like GreensockJS. So this is an experiment, and a source of inspiration of sorts. Also I thought it would be great to have a single topic where everyone can share your examples! I know some of you have a lot of things you've created lately or are in the works. There's probably some really cool things out there! I'd personally like to see what things GreensockJS is capable of reproducing from what we were used to seeing in Flash advertisements, and other animated/interactive Web "creations". Needless to say my GreensockJS samples aren't quite the best yet. I've just been experimenting enough lately to see just what it can do. Though still, I'll start by sharing a few basic ad banner samples made with Greensock JS TweenLite. So check it out here. Everything on the page is HTML/JavaScript/CSS/GreensockJS. Note it might be a little slow loading (not due to Greensock in any way). Just refresh to see the full animations again. So again if you've made something original and creative in Greensock JS, share it here for others to see. Enlighten us all on the possibilities of Greensock JS!
  6. Hi I am working on a website for a client which is basically an old flash site which I am translating into HTML with GSAP animation. The whole thing also uses parallax.js to create a layered 3d effect. This works great across all devices and moves when an ipad is tilted etc. My problem is that tweenmax is clashing somehow with the parallax javascript and causing the animations to jump or in the case of CSS opacity the fade does not work at all. When I remove parallax.js then it works just fine. So I did some research and then it occurred to me that it may be possible to create the parallax effect without using the plugin but through gsap itself and then it wouldn't cause compatibility issues. But although I can find examples of parallax controlled by mouse movement, there doesn't seem to be anything about creating this effect with device orientation/tilting etc Is this even possible? Thanks
  7. Hey there everyone in the community, I am new here and firstly I gotta say to the GSAP Dev's...GREAT JOB, amazing plugin. But, even with its ease of use, I found it hard to aquire my desired effect. What I iam to accomplish, is to initiate a text animation I have used from your examples in the ZIP file, upon scrolling over the desired DIV. As it sits, GSAP uses: $(window).load(function() { to initiate the animations declared in the JS. Since I do not ant the animation to instantly start on page load, and I want it to start once scrolled over, this does not work for me. Now, I have tried the simple and powerful: $(window).on('scroll', function() { to try to reach my results. Hoever, even though it works upon scrolling over. It also works upon page load. Meaning, that lets say Im at the point of origin where the animations take place on the page. I refresh my page in that spot and the GSAP takes place right away. I move out of that space to another point on the page and scroll back to the animation area, and the letters in the animation are there as if the animation has finished (which it has because it still initiated on page load somehow) BUT then... the animation occurs upon scrolling over, but, get this...the animations from the scroll, take place underneath the completed animation that occured on page load. It is very hard to explain but you can evaulate my code below, and maybe help me to get the animation to only take effect when it is scrolled over. Here is my code: $(window).load(function() { var logo = $("#logo"), progressValue = $("#progressValue"), totalProgressValue = $("#totalProgressValue"), timeValue = $("#timeValue"), totalTimeValue = $("#totalTimeValue"), restartBtn = $("#restartBtn"), txtContainer = $("#txtContainer"), tl, progressSlider, totalProgressSlider, txt; /* Build DOM Elements*/ function splitText(phrase) { var prevLetter, sentence, sentence = phrase.split(""); $.each(sentence, function(index, val) { if(val === " "){ val = " "; } var letter = $("<div/>", { id : "txt" + index }).addClass('txt').html(val).appendTo(txtContainer); if(prevLetter) { $(letter).css("left", ($(prevLetter).position().left + $(letter).width()) + "px"); }; prevLetter = letter; }); txt = $(".txt"); } /* Build Timeline */ function buildTimeline() { //note this timeline uses 3D transforms which will only work in recent versions of Safari, Chrome, and FireFox. IE10 will support 3D transforms as well. All other browsers simply will not show those properties being tweened. TweenLite.set(txtContainer, {css:{perspective:500}}); tl = new TimelineMax({onUpdate:updateUI, repeat:2, repeatDelay:1, yoyo:true}); tl.from(logo, 0.5, {left:'-=60px', ease:Back.easeOut}); tl.staggerTo(txt, 0.6, {rotationX:"360deg", color:"858585", transformOrigin:"50% 50% 10"}, 0.02); } /* callbacks */ function updateUI() { //change slider value progressSlider.slider("value", tl.progress() *100); totalProgressSlider.slider("value", tl.totalProgress() *100); //update display of values progressValue.html(tl.progress().toFixed(2)); totalProgressValue.html(tl.totalProgress().toFixed(2)); timeValue.html(tl.time().toFixed(2)); totalTimeValue.html(tl.totalTime().toFixed(2)); } function init() { splitText("CONTACT US"); buildTimeline(); //show the demoBackground div after DOM is ready and all images loaded TweenLite.set($("#demoBackground"), {visibility:"visible"}); } init(); }); If anyone sees what I am doing wrong here, or can help...please do. I am not very new to JS or jQuery but am very new to GSAP. So any help is appreciated. Thanks in advance! EDIT: Here is my HTML: <div id="demo"> <h1 id="txtContainer"></h1> </div> </div> Thanks again! ~Jason of AJADMIN Websites
  8. i have to be doing something wrong lol....first off i have a parallax scrolling intro to my site ....using GSAP. i have abt 20 items in total with about 70 individual animations lol..... this is what a small section of my code looks like var svg3 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 180 }); var sceneSvg3 = new ScrollScene({ duration: 1000, offset: 2000}) .setTween(svg3) .addTo(controller); var svg4 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationY: 180 }); var sceneSvg4 = new ScrollScene({ duration: 1000, offset: 7200}) .setTween(svg4) .addTo(controller); var svg5 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationX: 180 }); var sceneSvg5 = new ScrollScene({ duration: 1000, offset: 9000}) .setTween(svg5) .addTo(controller); var svg6 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 45}); var sceneSvg6 = new ScrollScene({ duration: 1000, offset: 11000}) .setTween(svg6) .addTo(controller); var svg7 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, { rotation: 90}); var sceneSvg7 = new ScrollScene({ duration: 1000, offset: 13000}) .setTween(svg7) .addTo(controller); var svg8 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, { rotation: 900}); var sceneSvg8 = new ScrollScene({ duration: 1000, offset: 13000}) .setTween(svg8) .addTo(controller); var svg9 = TweenMax.to(".svg-1, .svg-4 " ,1, { left: "0%" }); var sceneSvg9 = new ScrollScene({ duration: 1000, offset: 16000}) .setTween(svg9) .addTo(controller); there has to be a more organized way of doing this...i have pages of code that looks like that lol.... also im not sure if all the repeated code is even neccesarry....some help would be greatly appreciated
  9. Hi, I am using the ScrollMagic Jquery plugin to create a parallax site. For one of my sections I would like to animate an element in from the bottom of the screen to finish in the middle. The element will come into view as the user is scrolling the page. I am struggling to animate anything in from the bottom of the screen. I have looked online for this answer for a while and after trying many different things I am still nowhere near a solution. Not only do I want the element to animate in from the bottom once its reached a certain place on the div it needs to lock in place whilst the user is still scrolling and then I will have it fade out and display another element. Thanks in advance for any help.
  10. Hi, I'm using the throwProps dial code from the Greensock example. I need to calculate which turn of the dial the user is on eg. turn 2 of 10 How would I do this? At the moment I am trying to calculate whether the user is turning the dial clockwise or anti-clockwise. Then either adding 1 to the turn count if the turn is clockwise and the rotation value equals 359º or subtracting 1 from the turn count if the turn is anti-clockwise and the rotation value equals 0º Is this the correct way or is there another way by adjusting the original sample code? Here's my code in addition to the throwProps sample code. The calculateDialDirection is wrong, so I need a delay of some sort when grabbing the old and the new rotation values. Maybe with an array. // Calculate Direction of Dial (Clockwise or anti-clockwise) // --------------------------- var oldDialRotation:Number; var newDialRotation:Number; var calculateDialDirection:Number; var dialRotationDirection:uint; // Grab first rotation value oldDialRotation = degFromDeg(dial.rotation); // i.e. 5º // Grab second rotation value newDialRotation = degFromDeg(dial.rotation); // i.e. 10º calculateDialDirection = newDialRotation - oldDialRotation; if (calculateDialDirection > 0 ){ dialRotationDirection = 1; // Clockwise } else if (calculateDialDirection < 0 ){ dialRotationDirection = 0; // Anti-Clockwise } else { // No Change } // Count How Many Times Dial Has Turned var wheelTurnNumber:int = 0; if (dialRotAFTERdegFromDeg == 359 && dialRotationDirection == 1){ // Clockwise wheelTurnNumber ++; } else if (dialRotAFTERdegFromDeg == 0 && dialRotationDirection == 0){ // Anti-Clockwise wheelTurnNumber --; }
  11. Is there any way to output a Greensock animation to an Animated GIF, without going through an SWF to GIF Converter? Exporting the animation from Flash CS6 using File > Export > Export Movie... > Animated GIF results in a 1 frame animated gif as the code only resides on 1 frame.
  12. Hello. I am checking out v12 AS3 Tweenlite for the first time. Previously I used 10 and 11 extensively. I see now there is a "greensock.swc" file. What do I do with this? I can't find reference to it in the "docs" nor when I search this forum.
  13. Hi, Need help with adding blur to a background using GreenSock, in a similar way to the vertically swiping Control Center screen in iOS 7. At the moment we're having to add blur to every single movie clip behind the main layer. TweenMax.to(container.mc, 1, {blurFilter:{blurX:20, blurY:20}}); . What we need is for the foreground layer to blur 'anything' that appears behind it, not just the elements we specify. Is this even possible?
  14. Hello.. Sorry if this is not a question regarding usage of GSAP. But i didnt know where else to ask this question. Where does the name GreenSock come from or / and what is the story behind the name GreenSock?Thank you!
  15. Hi I just bought the the Shockingly Green version and I have a little problem with animating a timeline object. This works very well in the begining but I want to set the alpha of the object to zero when it is done animating but alas it won't work! WHY Can some one please help me. _timeLine.insertMultiple(TweenMax.allFrom(_vadVetDuOm.textFields, 2.5, {blurFilter:{blurX:20}, x:"-200", alpha:0, ease:Quad.easeIn}, 1)); _vadVetDuOm.x = 5; _vadVetDuOm.y = 100; addChild(_vadVetDuOm);
  16. I am developing a Metro UI style tile menu. How do I change Greensock's perspective, effectively flattening the camera zoom as you would in a 3D package? Also, how would I give each movie clip it's own perspective instead of using the entire stage? I have tried to illustrate what I mean in the screenshot. import com.greensock.*; import com.greensock.easing.*; var myTimeline:TimelineLite = new TimelineLite(); myTimeline.insert(new TweenLite(mc, 1, {rotationY:90, delay:0})); myTimeline.append(new TweenLite(mc, 1, {rotationY:0 , delay:0})); myTimeline.play();
  17. i need to control my background scrollview with strict rectangle , i don't need the ease effect to let the background scroll out of rectangle . i need easing just inside the rectangle , i mean i need start point and end point to my background .
  18. i use ThrowPropsPlugin and blitmask , and its wow scrollview for my background but it disabled every listeners and every movieClips animation inside the background movieClip i dont know why ? this line of code which disable every thing .. blitMask = new BlitMask( mcBg, bounds.x, bounds.y, bounds.width, bounds.height, false); please help me , i need the smooth blitmask scroll , and also i need the children inside the background -mcBg- to work .
  19. madina

    Machine Gun Effect

    Having trouble getting the Greensock machine gun effect to work on my site. I took the code used from codepen... http://codepen.io/GreenSock/pen/AGzci Cant for the life of me figure out why this isn't working on my site... http://madina.co.uk/test/ Please could you shine some light on this? I need some kinda trouble shooting article Thanks Mark
  20. I've seen that a lot of the greensock core classes have an undocumented "version" constant that can be displayed for debug purposes. Is there also a global "version" constant for the current greensock version per se, or would it be possible to add such a constant? It sure would be useful!
  21. Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J
  22. UPDATE: Arggh. I am tired. Pesky quotation marks! I may be just tired today, but this is throwing me -- I'm getting a syntax error on the following line. I'm trying to tween multiple objects returned by jQuery to 0px (this is the ubiquitous accordion menu — I'm trying to replace jQuery slideUp and slideToggle with GSAP equivalents) TweenMax.to($('#nav li ul'),0.25,{css:{height:0px}}); Can GS parse the return of a jQuery selector that returns multiple values? I had thought so -- I'm probably missing a parenthesis, and I apologize if I am, but I don't see it!
  23. Hello, I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent. The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at: http://www.greensock.com/transitions/ http://www.greensock.com/css3/ and the "CssPlugin" section of your documentation at: http://api.greensock.com/js/ But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.") After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/ What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most. Thanks, for viewing & best wishes, J
  24. Hello, I've been working with the Javascript version of GreenSock v 12, EaselJs, and the Canvas element. I know that the Actionscript version of Greensock has a CircluarPath2D or something something like that, but I've searched Google and the Greensock forums and cannot find a way of actual animate the drawing of a shape like in Flash. I've seen tons of examples on "Transforming" shapes, and the drawing of shapes and then put them on the screen, but not any actual on-screen animated drawing of a shape/bezier. I also, looked into svg, but did not see an option there. Is it possible to do this without using masks? If so, please provide a very simple example or send me a link to how to do this Thanks for viewing, any help will be greatly appreciated.
  25. We are a growing advertising firm with need for a capable and creative thinker. We are building sites with flash/as3, html5, and js. We currently have a flash site that needs to be completed (most of the sections are done, but not coded). If you're interested in coding with us or you know someone that is and you know greensock and gaia well, we'd like to hear from you. pdf of spec: www.englishblackwell.com/englishblackwell_websitelayout_instructionsv3.pdf You may also contact us directly at andrea@englishblackwell.com
×