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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi team, If I have a master timeline that contains 3 smaller timelines. Let's say if I want to change the start time of getPinTimeline so that it overlaps on the timeline of getRotateTimeline. How can I do that? var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); Cheers, Venn.
  2. Can Greensock TweenLite/TweenMax globals be obtained when using the library as CommonJS module? E.g. easing functions that are available as window.com.greensock.easing, like let Power4 = require('./TweenMax')... I feel myself 10 years younger when I look at all these globals. I look at the source code and see that the only export is TweenMax constructor. Can it be done somehow without resorting to globals at all?
  3. Trying to use some TweenMax animations on a couple of Joomla! sites, versions 2.58 and 3.x I ordinarily just add the TweenMax.min.js to a site somewhere in the headers, and it's no exception with Joomla. A custom template, code inserted into the index.php file, thusly: <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/TweenMax.min.js"></script> </head> That apparently works without tripping up anything. But when I try to use a small .js file with theTweenMax script (inside a Joomla custom module) that relies on the TweenMax code, nada. Nothing much around here that addressed this issue. Does anyone have some idea of how to make TweenMax behave with Joomla? TIA!
  4. Hey there. In my Project I use allot of Tweens. At a specific point it wish to reset all current tweens excluding a select few. I wish to store a variable on these Tween to exclude so when resetting all the current tweens these can be tracked an avoided. I've tried this sofar but when assigning the failed tag SStimer return undefined. Yet I can access this tween when using TweenMax.getAllTweens()[index]. Am i Missing something major here? trigger.SStimer = new TimelineMax({delay: 180}) .call(function () { console.log('Slow selection fired'); delete this }); trigger.SSTimer.failedTag = true;
  5. Hi everyone, I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing. I want each box to run on the different paths. Any idea/s what is wrong with this code? See on codepen: http://codepen.io/anon/pen/WrQeOp Thank you very much in advance. Kind regards, Fernando Fas
  6. 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
  7. Hi All, I have looked through this forum here, but I didn't quite see this discussed. I want to change the easing type between a play() and reverse() animation on a TweenMax. However, it seems to change the ease type only once, and all subsequent attempts to use updateTo seem to do nothing. I did find a really hacky way around the issue by adding tween._ease = tween.vars.ease; after the updateTo. You can see this in the CodePen by uncommenting line 4. That does not seem like the right way to actually do this. This feels like I'm just missing something simple, but I've looked at the docs and Googled around and I don't see where my error is.
  8. l have just added tweenMax to a site that l am building and l am realising a clitch a page jump on load. anyway that we can resolve this please?
  9. I'm trying to come up with a lightweight "news ticker" type of animation. Just maybe 2 different lines of text, one replacing the other in a loop. No problem with the looping or the use of the TextPlugIn. But the docs allude to how one can create custom delimeters to change the way the animation works with the text. I've played around with the jQuery news tickers out there, but thus far, none of them seem to work reliably in the context of a client's e-commerce site, which apparently was constructed by someone who had no real concept of good HTML5 coding practice. I have a different TweenMax animation running on that site now, so it wouldn't be an issue to just write a different TweenMax animation - it just works. How do custom delimeters for theTextPlugIn work? TIA!
  10. I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural. Codepen: http://codepen.io/anon/pen/dGbOLZ Is there a better technique to do an SVG flip that will work on all browsers?
  11. Hi GSAP team! I have discovered your GreenSock.js few days ago and really got impressed - nice work! And I have started playing with simple TweenMax from & staggerFrom examples, but along the way got some strange results. ---------------------------------------------------------------------------------------------------------- So, here is my basic work so far: EXAMPLE 1: TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:1, rotation:22.5}); RESULT: http://i.imgur.com/s5BT3SD.gifv EXAMPLE 2: TweenMax.staggerFrom(".explodedLogo", 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); RESULT: http://i.imgur.com/RUjryaG.gifv EXAMPLE 3: COMBINED TweenMax.staggerFrom(".explodedLogo", 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:6, rotation:22.5}); RESULT: http://i.imgur.com/Os0G4EF.gifv Sorry animated gifs are - ironically - not allowed in the editor So, when I try to combine those two in a sequence, the rotation in .from get distorted position. Why does this happen? I have also tried with a timeline sequencing, the problem remains the same. Is this a bug or am I doing something wrong here? ---------------------------------------------------------------------------------------------------------- Also, I have discovered that CSS (and CSS animation) always precedes tweens, which means that if I set opacity to 0 in my CSS regardless of the animation opacity levels, entire element will be invisible. Is this by design? Can this be over-ridden so that animation takes over CSS somehow? ---------------------------------------------------------------------------------------------------------- Final question - How do we control the moment our animation is going to start? I am targeting the page load/rendering here, specifically. I have discovered that many times, when page does not load+render completely, the animation already starts executing in the background, which means that user may never see it happening. Once the rendering of the page completes, all it will see is just finished animation (e.g. last frame) as if it never happened. I tried to solve this with: window.onload = function() {} But, this created at least one problem: as you can see from the animated GIFs, I use a custom font. However, with onload wrapper in Mozilla Firefox, the animation displayed an ordinary letter "O" for a split of a second upon initial page load/render, than removed it, and only afterwards the animation got executed as it should. This was not happening in Chrome and other browsers that I have tried. So, again, that is undesired behaviour, possibly a bug in Firefox, but I really want smooth and universal solution that will work. So, I removed this method and reverted to the good old delay. By the way, the website is here, so you can see the basic version I currently use. ---------------------------------------------------------------------------------------------------------- I know I probably ask a lot in my first opening post, but I really appreciate your help Thanks, Regards
  12. I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.
  13. I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
  14. Hi, guys. I am quite new to GSAP. The system is really solid, however, I ran into a small problem. I am trying to animate the X property of the the main container and text in it. Basically, I want to make a nice slide out menu. THE PROBLEM: The black background slides out really nicely, BUT, the text starts sliding out as normal, but then jumps at the end as if it was skipping something. I cannot figure out what is causing that. I would be really grateful If someone helped me out, because I feel like I am missing something really fundamental here. Here is the code: Codepen: http://codepen.io/arthurleonov/pen/ZbPrLX var menu = $('.js-menu'), menuContainer = $('.menu-container'), menuItems = $('.js-menu-items h3 a'); var tl = new TimelineMax({ paused: true, reversed: true, }); // set new timelinemax // container animation tl.from(menuContainer, 3, { x: '-1000', autoAlpha: 0, force3D: true, ease: Power3.easeOut }) // text animation tl.from(menuItems, 2, { x: '-600', autoAlpha: 0, force3D: true, ease: Expo.easeOut }); // toggle animation $(menu).on('click', function() { tl.reversed() ? tl.play() : tl.reverse(); }); Thanks in advance!
  15. When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it. The dots are more tightly clustered towards the end of the curve. Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this.
  16. GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
  17. Hi All, Starting from 0 here. My boss has asked if a GSAP HTML5 Banner that use Smartphone Accelerometer is possible. The idea would be that i multilayered image with a foreground, mid-ground and background would 'move' with the tilt on a smartphone. Can anyone point me in the right direction? Thanks for any help, Phil
  18. 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
  19. Can someone please help me fix this code that I found, I would like to use it in my assignment: the problem: on zoom in (ctrl+) and zoom out (ctrl-) the carousel goes crazy the code can be found at this address http://codepen.io/anon/pen/KdxJbP Any assistance would be greatly appreciated PS post responses here
  20. Hi. We have a GreenSock TweenMax animation. Now we want to pause an objects animation, and have it resume the animation later on at exactly that point. If we just use resume(), then the animation jumps forward of course. So we wanted to pass resume() or play() parameters to have the animation resume at the points where it was stopped. However, the parameters are ignored. It doesn't matter what we enter there. So, for example: object.pause() pauses the animation object.resume() makes it jump a little bit forward object.resume(0) does exactly the same, as does object.play(20) or whatever we try No error message is shown. What are we missing? Thanks for any help
  21. I am using TweenMax to create some small banner ads. The client wants some timed things, no problem. But I'm wondering why in the following code, I have to declare "var pointer" more than once. Why is the initial declaration (is it not a global variable here?) not available to the endseq function? That is, if I remove the var pointer line (in blue) from the endseq function, the code breaks. Stupid question, I know, but JS is not my cup of tea. <script> window.onload = function(){ var pointer = document.getElementById("arrow"); var text = document.getElementById("message"); TweenMax.to(pointer, .8, {x:-30, repeat:6, yoyo:true}); TweenMax.to(text, .8, {repeat:6, border:"2px solid white", yoyo:true, color:"white", onComplete:endseq}); } function endseq(){ var pointer = document.getElementById("arrow"); TweenMax.to(pointer, 1.9, {rotation:360}); TweenMax.to(pointer, .8, {x:-5, repeat:0}); } </script>
  22. Hi, I am animating several elements at a time, sometimes using TimelineMax and sometimes using TweenMax. What I am trying to do is check if all Tweens are complete in order to prevent certain user events. I'm aware you can use TweenMax.isTweening() to check specified elements for tweening but is there a way can check for all tweens without storing an array? Many thanks.
  23. I tried use TweenLite in this pen: http://codepen.io/lagden/pen/QjQbwp?editors=001 and nothing happens! I would like to use TweenLite, but I don't know which feature is missing for it works!! TweenMax is very heavy for it! This is my current code! It is using TweenMax and it's working. TweenMax.fromTo(circle, duration, { x, y, scale: 0, opacity: 1, transformOrigin: '50% 50%' }, { scale: 10, opacity: 0 });
  24. Hi there, I have the following TweenMax sequence: expandedAnimation = function() { var i = 0; var a = 1; var d = 2.25; var t = 0; var o = 4.25; TweenMax.set('#dc_logo', {alpha:a}); TweenMax.set('#videoContent', {alpha:i}); TweenMax.set('#exp_txt1', {alpha:i}); TweenMax.set('#exp_txt2', {alpha:i}); TweenMax.set('#exp_txt3', {alpha:i}); TweenMax.set('#exp_txt4', {alpha:i}); TweenMax.set('#exp_txt5', {alpha:i}); TweenMax.set('#exp_txt6', {alpha:i}); TweenMax.set('#exp_txt2_1', {alpha:i}); TweenMax.set('#exp_txt2_2', {alpha:i}); TweenMax.set('#exp_txt2_3', {alpha:i}); TweenMax.set('#exp_txt2_4', {alpha:i}); TweenMax.set('#exp_txt2_5', {alpha:i}); TweenMax.set('#exp_join', {alpha:i}); TweenMax.set('#bar', {alpha:a, width:0}); TweenMax.set('#logo', {alpha:a}); TweenMax.to('#exp_txt1', t, {alpha:a, delay:.25}); TweenMax.to('#exp_txt2', t, {alpha:a, delay:.5}); TweenMax.to('#exp_txt3', t, {alpha:a, delay:.75}); TweenMax.to('#exp_txt4', t, {alpha:a, delay:1}); TweenMax.to('#exp_txt5', t, {alpha:a, delay:1.25}); TweenMax.to('#exp_txt6', t, {alpha:a, delay:1.5}); TweenMax.to('#exp_txt1', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt3', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt4', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt5', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt6', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2_1', t, {alpha:a, delay:2.5}); TweenMax.to('#exp_txt2_2', t, {alpha:a, delay:2.75}); TweenMax.to('#exp_txt2_3', t, {alpha:a, delay:3}); TweenMax.to('#exp_txt2_4', t, {alpha:a, delay:3.25}); TweenMax.to('#exp_txt2_5', t, {alpha:a, delay:3.5}); TweenMax.to('#exp_txt2_1', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_2', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_3', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_4', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_5', t, {alpha:i, delay:o}); TweenMax.to('#exp_join', t, {alpha:a, delay:4.25}); TweenMax.to('#bar', .5, {width:82, delay:4.25}); TweenMax.to('#exp_join', t, {alpha:i, delay:5.5}); TweenMax.to('#bar', t, {alpha:i, delay:5.5}); TweenMax.to('#logo', t, {alpha:i, delay:5.5}); TweenMax.to('#dc_logo', t, {alpha:i, delay:5.5}); TweenMax.to('#videoContent', t, {alpha:a, delay:5.5, onComplete:startVideo}); } startVideo = function() { vplayer.play(); } I know this is probably simple for some, but I'd like to convert this to TimelineMax because I need the animation to stop executing if my banner is closed, and reset, and begin animation again if it's re expanded. Right now, if you close the ad mid animation, and then re-expand, the code that was previously executing is still running, and then a new set starts again making a huge mess. When I tried converting to TimelineMax by using the var tl = new TimelineMax() and then tl.add to each one the delays got all messed up and I wasn't sure how to get the same results. Is there an easier way to reset/pause my function without totally redoing all my delays and etc? Any help would be appreciated. Thank you