Jump to content

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


  • 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. Hi there, I am trying to build a project for work that is essentially a map based infographic. This is my first major project using Greensock so i am trying to do things step by step. First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this? Of course at the moment when i click one they both open. Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use? Any help is appreciated, Phil
  2. I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out. 1. How to disable the scrolling of the content-wrapper. 2. How to only scroll the off canvas menu. Right now it scrolls the height of the website itself. Here is a code pen to show you what issues I'm running into. http://codepen.io/icekomo/pen/LNwEWM Thanks!
  3. Hi there, I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger. For example: This is the original code: The css for the <div cortana_blurb> is set to width: 0; MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, ease:Linear.easeNone}), .4; TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 }); TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 }); TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 }); TweenMax.to(cortana_blurb, .15, {width:204, ease:Linear.easeNone, delay:1.6 }); } What I want is to minimize it to one line code like: MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, 64, 111, 144, 204, ease:Linear.easeNone}), .4; } I know it's a trick one, but if there is a way to do it and you guy could help me it will be great. Kind regards, Fernando Fas
  4. Hi I'm trying to scale an image over a period of time but it appears jerky! Is there a way I can make it smoother? Please refer to Codepen URL. Thanks!
  5. Hi, I am trying to create an accordion menu using Greensock. Alot of the code I have used comes from this section of the forum. http://greensock.com/forums/topic/9110-accordion-menu-with-gsap/ Two things different that I am trying achieve are: Making 'one' open on page load. Add padding inside the content areas. (Seems to still add padding when the sections are closed.) Any help is much appreciated. Cheers, Phil
  6. Hi, I am trying to create a mobile menu using Greensock. When the page loads the menu automatically opens. When I add .pause() to the timeline this it doesn't work at all. Am I even close? Thanks, Phil
  7. Hi there, I am attempting to restart the #counter in this codepen example once the timeline has finished playing. Ideally i would like to trigger the restart (20 secs) from the timeline. I added the onComplete: "resetTimer" which is queuing this function and it didn't throw an error so i am wondering if I am on to something? function resetTimer() { var seconds = 20; } Any help is appreciated! Thanks, Phil
  8. Hi Is it possible to make it so that the smaller pies in the attached codepen follow the same orbital path using bezier? Currently the paths are slightly different! Many thanks!
  9. Hi I'm trying to rotate an object around a central point. In this case the object is a pie. I want the pie to be spinning as it rotates! Any ideas? Many thanks!
  10. I am testing an animation through Google Chrome which currently is not working. I do not receive an error but the console log reports "invalid pause tween value: true". In general, what does this mean? I searched the forums and did not find any topics on this message so I though I would go ahead and ask. If it helps, below is my code for the tween: var fadeOut = function (el) { var animation = TweenLite.to(el, .75, { autoAlpha : 0, bottom : "-=100px", ease : Linear.easeNone, paused : true }); return animation; };
  11. I have been looking at the trends on the award winning websites and reported the results in this article and video. I still continue to review these trends and will publish a summary of 100 sites of the day sometime in April. Here are some of the top sites using GreenSock for your inspiration or just to kill some time at work:) Adidas Ace 16 Publicis90 Jetlag Photos Concrete LCDA Tati Express Epicurrence No. 3 Around the World in 12 Dishes Control Films Sailing with Greenpeace Have a great day/night/weekend.
  12. Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil
  13. Hi all, Trying to build a greensock slider with some code that i have put together from pens, tutorials etc. I thought i was going well but i have hit a snag. I wanted the first slide to have have another timeline inside of it where 3 elements animate independantly. these then all dissappear as the first slide does. The problem is when it repeats the first slide doesn't animate again. Is there a way to make it 'refresh'? Thanks for any help, this is probably a bit adventurous for me but really wanted to give it a go. After this i'm going to try and add the buttons. Phil
  14. Hi there, Just a quick question. Is it possible to create a flicker effect when images fade using the autoAlpha: 0 effect? Something like this... (I thought Elastic would help but it didn't.) TweenMax.to("#div", 1, {autoAlpha: 0, ease:Elastic.easeInOut}) Thanks, Phil
  15. Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
  16. Hi there, I am new to draw SVG and having problem getting started. Sorry if the solution is simple. I have done tutorials and can't find the answer anywhere. Am I missing something in the attached codepen? I just want the line to draw from the top left to the bottom right. I would also like the line to appear as _ _ _ _ _ _ _ if possible. Thanks so much for any help, Phil
  17. I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.
  18. I'm currently trying to build a slideshow to practice whatever I learn about Greensock. Most things behave as expected, except for when I click next/prev real fast. In that case the slideout animation never gets fired, and the next time I reach the same slide, everything is already animated. What would be the best way to prevent this from happening? Thanks! Small edit: Got the same with this pen: http://codepen.io/aderaaij/pen/QjedBd
  19. Hi there, I am starting from scratch here so apologies. I have been asked by a client to trigger an animation (similar to a banner ad) based on the browser position. It would be great if the animation then reversed on scroll up. Two Q's... 1. Is this possible with Greensock? 2. Where do i start? My Codepen example is an attempt at recreating the site that the animation will eventually live on. Thank you so much for any help, Phil
  20. Pusher

    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
  21. 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?
  22. 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.
  23. 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, }); });
  24. 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.
  25. 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