Jump to content

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

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
  • 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. Hey guys, I'm trying to figure out how to make this fish vector appear to make a flopping in-air animation. At first I was thinking that MorphSVG would be the ideal tool for this, but then diving deeper I'm noticing that there's so many paths I believe I would have to find an ideal shapeIndex for each to get a fluid motion. Transform gives off the whole 2D vibe since I'm using scale -1 to give the appearance of a reflection during the flopping animation. This is a link to a primitive attempt to use MorphSVG http://codepen.io/dylan9o4/pen/bgQLyP And this is a link to a primitive a
  2. In the docs (https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/) I notice it says that to use Draggable, all you need is TweenMax. "REQUIREMENTS: TweenLite and CSSPlugin or just TweenMax which contains both." However, at the top of TweenMax.js (v 1.19.1) it says "Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin" and there is no mention of 'Draggable' anywhere within the file. The CSSplugin.js file also seems to contain no mention to 'Draggable'. I am havin
  3. Hi Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated. Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and
  4. Hello all, This is my first post in this forum. I have recently started using Greensock in my projects and it's the best javascript plugin out there on internet. So thank you so much for making this and helping people like me. Here is the codepen url: http://codepen.io/cooldhavs/pen/GrBraM This example uses Scrollmagic and Tweenmax timeline. My question is, when I resize the window below 990px, animation should stop immediately and it should show fixed layout below 990px. So when I resize window below 990px, all the boxes should stay touched at the bottom left corner and won't
  5. Hi everyone, Thanks in advance for your help. I've gotten pretty familiar with GSAP/Scroll Magic over the past year or so and have used it on many projects. This is the first time I've been unable to get things working via troubleshooting/docs... so hopefully it's even possible. I'm trying to create an interactive timeline that will trigger new slides whenever you reach the next "period/year". However, the timeline has to remain pinned as you scroll. The functionality isn't quite there yet, but I've added indicators to show the issue I am having. Whenever you scroll it pushes the individual
  6. Hi, i have problem with smooth SVG elements animation controlled by draggable. Its not working properly, pls check codepen http://codepen.io/mkurdziel/pen/XKEzxm. First thing is that not every element in animating, whats more, some of them are not coming back after animating. I think that TweenMax.ticker.addEventListener("tick", updateVelocity); is not working properly, pls check console. As you can see, its not registering all of the "move" there are gaps between numbers e.g. 100, 105, 107. It should be 100, 101, 102, 103 etc. Do you have any idea to resolve this problem?
  7. Hello, I have no code pen URL for this question, because I don't know if I can get this in there without importing most of my animation framework, etc. This is really a question of how to accomplish this in your framework. Background Details I have a configuration file in PHP which provides the details for each Tween animation, and I've specified friendly names in my code to give me details of the animation. I'll post an example of one of the animations in the end of this post so you can see the fields, structure I provide. I have a JSON object below which represents how I format
  8. Hi Guys, I am trying to make the yoyo animation to loop infinite time with some pause. Like it will shake about 5 times then pause for 2 sec and then repeat shaking. Is it possible? Thanks
  9. Hi guys! I am new to Greensock and I am so amazed about the power it has. I started to learn how to use it and during one of an example project I found a problem in which I can't go on. The problem: I have a panoramic photo, that is bigger than the screen and I want to use TweenMax to move over it and show also the hidden part, till now is everything ok, the problems come if I want to move to the same direction more than one time. For example when I want to discover the right part of the image and I push on my arrow button to move right the first time I push it works, but the second time I p
  10. I have animated an element's attribute using TweenMax like this: TweenMax.to($(".element"), 2, { rotation : 180 }); Later on, I need to get the value of the rotation, is it possible? Something like this: TweenMax.getValue($(".element"), "rotation"); // just an example How can I get the value of an attribute animated by TweenMax?
  11. Hi there. First of all I want to thank you for such a great animation platform as GSAP. I am beginner in it, and I have some questions. I have a task to animate my card of product. First it's just drawing a path of svg patterns. Second when onHover event is fired Iwant to put it up and put down them and drawing them in reverse direction simultaneously. More you can see on codepen link. I have done it, but when I call hover event in during the first animation, my svg path is cut. Why? What's wrong with it? I pin screen of bug http://joxi.ru/82QMg35TGO9b2d
  12. Hi there, I am new to greensock and even to jquery/javascript at all. I am trying to scale the "g" parts of a svg element from 0 to 1. It already works but the elements don't stay in their end position when they are animating, but "move" in along the x and y axis. I am wondering if there is a way, that they stay fixed in their position and just scale from 0 to 1? I already searched the forum and found advises about transformOrigin, but none of them solved my problem.
  13. Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although o
  14. Hey forums. Iv'e run into an issue when passing data into a scroll event listener to fire a callback with preset variables. The settings.in.func callback fires repeatedly instead of once and the vars object wont be accpeted in the TweenMax vars parameter. The Code pen link provides this behavior when scrolling down.
  15. I've added some code to allow the timelne start slow and end fast. I want to put this on a master timeline with others. If you uncommnet out my Master timeline you will notice the time line tween no longer takes effect TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); I 'm clearly doing something wrong as this is not adding to the master timeline as I would like. any help would be much appreciated Ryan
  16. lynette

    pause onclick

    Hi, Is there a way to add an pause onclick? Here is my code: var $container = $("#container"), $content = $("#content"), $bg = ("#bg"), $panel1 = ("#panel1"), $panel2 = ("#panel2"), $panel3 = ("#panel3"), $line1 = ("#line-1"), $line2 = ("#line-2"), $line3 = ("#line-3"), $line4 = ("#line-4"), $btn = ("#btn"), $exit = ("#exit"), tl; var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=2.25")
  17. lynette

    duration timing

    I would like to know how can I make an animation appear longer? I want it to EG: var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=1.75") .to($line1, 1.5, {opacity:0},"+=0.25") .from($line2, 1.5, {opacity:0}, "+=1.15") .to($line2, 1, {opacity:0}) .from($line3, 4, {opacity:0}, "go-=0.35") .from($line4, 4, {opacity:0}, "go-=0.35") .from($btn, 4, {opacity:0}, "go-=0.35") i changed 4 to 0.5 but then how do I make it appear longer ? What happens as well, I have the gif image loop 3 and the
  18. Hey guys! I'm trying to draw out a rather dense set of SVGs. Ideally I'd like to draw out EVERYTHING, including the boxes on top, and the text (if that's possible?). But either way I'm having weird issues with the timing. I'm guessing it's related to how I am calling the "shapes" variable, like maybe it's running through a LOT of shapes, but only really drawing the lines? Any suggestions would be helpful!
  19. Why onRepeat function in tweenMax works only once?
  20. I'm making a call to animate a wedge in my chart from one position to another like so: TweenMax.to("#wedgePath_" + id, 1, { morphSVG: data[j].Value[1] }); This for every other wedge in my chart except one, where the wedge doesn't animate and instead just infinitely repeats an error (I'll screen shot the detail and attach it). The "wedgePath" + id matches the id of the wedge in chart. The original path is "M229.8083 276.5665 A185 185 0 0 1 268.2768 233.1447 L220.6919 132.8616 A185 185 0 0 0 124.5208 241.4164 Z" and data[j].Value[1] is "M374 300 A185 185 0 0 1 374 300 L485 300 A18
  21. Hi, I have just started working the Tweens here, so please if you can help me on probably a simple thing for some. I would like to: 1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplays after the animation). 2. When clicking anywhere on the banner to be taken to the external link, the video stops. 3. The video stops after playing for example, 10 seconds. Can this be done? I have been trying and looking into it and unable to combine my animation and Youtube video together.
  22. Hi, I'm not an expert in GSAP and I have some troubles with my SVG animation. Indeed, I want to create a pre-loading effect on my page but I have some issues regarding the delay. I made a screenshot which show my problem : https://vimeo.com/189758547 My SVG appears at the beginning of my animation but I want to reveal the SVG by animating the strokes. Here is my JS code (the link to my codepen) : $(window).load(function () { $(function () { var first = $('#firstletter'), second = $('#secondletter'), competences = $('.competence
  23. Try out picadipity.com to see GreenSock in action! From your help I was able to build a control that features infinite looping of pictures using modifiers. The control also supports draggable and throwable behavior with stops at notches that centers the pictures. I am using the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> <script th:src="@{js/greensock/ModifiersPlugin.min.js}"></script&g
  24. Hey guys! Im trying to recreate this as an SVG animation using greensock. I got stuck pretty quickly with a diagonal fold (I'm new to 3D). As you can see, I'm about halfway there! But it doesn't fold quite like it should. I need it to fold like it would with paper, across the diagonal line with no flipping. Any ideas?
  25. Greetings. I've several audio files in my project (html based animations), playing in different actions. I labeled every sound as; var audio1 = document.createElement('audio'); var audio2 = document.createElement('audio'); audio1 .setAttribute('src', 'audio/audio1.mp3'); audio2.setAttribute('src', 'audio/audio2.mp3'); etc. And playing them during animation with TweenMax (like audio1.play, TweenMax.to(audio1, 1, {volume:0...) I'm trying to mute all sounds if visitor leaves to another tab; with $(window).blur and focus functions, but active audio is changing during animatio