Jump to content
Search Community

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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Guest

    Greensock Menu

    Hi all, Just trying to build a fancy mobile menu using Greensock. I was wondering what the best way to make the + expand the menu and then the x to close it. Can I change the #mobicon's onClick to onClick="menucloseFunction" with an oncomplete of the menuFunction() ? Also, I had a thought that was to reverse the menuFunction() that I thought would work something like this but the reverse is not the normal colour when i enter it. function menucloseFunction() { menu.reverse() } Thanks for any help, Phil
  2. I've been using the 'scrollTo' plugin to scroll my divs, but now I need to implement that same functionality to affect an iframe. Is this possible?
  3. I have a movie clip that I want to drag "scroll left" in 650 pixel increments. I have a movie clip (mc1) that is 650x650px on the stage (embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images) I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2 //movie clip 1 Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); Could you help me with the code that I need to initiate this please, I just need a push in the right direction and away I'll go until the next hurdle. Learning heaps and loving it.
  4. Hi, people) Had anybody problems with animation in 'super' browser IE8, 9, 10 and so on? My animation didn't work in IE9(. It's handled through jQuery... in all other browsers everything is ok. Could you help me with advice! thanks a lot! $(document).ready(function(){ TweenMax.from(".logo", 0.8, { x: 500, y: 500, rotation: 2580, opacity: 0, scale: 0.2, }); });
  5. sym.getComposition().getStage().getSymbol('mc1').getSymbol('element'). Above is the button code (btn) I have to reach the symbol 'element', nested in 'mc1' on the stage. For this example I want to tween 'element' with this code: TweenMax.to(element, 3, {alpha:0.5}); in the future I want to apply a timeline to it. (is this possible? Not quite sure) tl.to(element, 1, {width:"50%"}); My problem is that I can't quite point to it, or figure out how to do this... I have managed to work out how to add external images, video, iFrames and apply text to nested symbols via buttons but this one is an issue for me. I hope to be able to control nested symbols within other symbols this way. Anyway I am a newbie and not that great at code so excuse my naivete. and don't laugh.
  6. Hi there, I am trying to animate a car moving along a road and need the wheels rotation and the chassis bouncing to stop as the road runs out. It's not looking too bad except that i can't get the chassis and tyre vars to finish after the rest of the timeline finishes. The code below simply pauses everything from the start. Sorry if the answer is obvious... <script type="text/javascript"> var chassis = new TweenMax.to ("#chassis", .1, {top:1, yoyo:true, repeat:-1}) var tyre = new TweenMax.to ("#tyre", .5, {rotation:360, transformOrigin:"50% 50%", repeat:-1, ease:Linear.easeNone}) var tl = new TimelineMax(); tl .from("#suv", 8, {left:20, ease:Elastic.easeInOut}, "start") .from("#shop", 6, {left:1456}, "start") .to("#road", 6, {left:-1456}, "start") chassis.pause(); tyre.pause(); </script> Thanks in advance, Phil
  7. 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!
  8. 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
  9. 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.
  10. 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!
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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 --; }
  16. 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.
  17. 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.
  18. 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?
  19. 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!
  20. 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);
  21. 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();
  22. 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 .
  23. 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 .
  24. 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
  25. 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!
×
×
  • Create New...