Search the Community

I have a very simple setup with two elements tweening right and left. One is using 'x' and 'force3D:true' while the other is simply using 'left'. Both seem to 'stick' as they move across the page, looking almost laggy. I'm running Chrome 49.0.2623.110 (64-bit) on OSX 10.10 and TweenMax 1.18.0. I even recorded the browser with quicktime and you can see it in the video, too. Is anyone else getting the same result?

Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).

i want to make a animation where circle is created randomly using canvas and i want scale all the circle at the same time with their origigin X and Y. please help me solve this issue . i have generated the circle but they were not scaling when i scale property it scale the whole circle as a single object. please help me thank you. here is a codepan link http://codepen.io/rk25028/pen/QNObbd please solve this i want every circle should scale.

I have to move the small circie on the path. the circle emits animated flying circle when continuous clicked. I want to When I continuous click the button,the every circle would complete the animation one by one. But,in my code,when I continuous click the button,the circle's animation will stop. I did not want results. Please find the code on codepen Thanks.

I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?

I am following the iHateTomato course and try to modify something. I want the main timeline to stop at the end of all the stagger effect like so: .staggerFromTo($pixel, 1, {autoAlpha: 0, cycle: { scale: ['0.5', '2'] }}, {autoAlpha: 1, scale: '1', ease: Elastic.easeOut.config(1, 0.3)}, 0.3, pauseProjects, [projectClass]) .add('pixelsIn') And the pauseProject function is function pauseProjects(projectClass){ console.log ("Main timeline pause!"); tlProjects.pause(); } It is throwing this error: TweenMax.min.js:16 Uncaught TypeError: b[a].apply is not a function And the console never log. What is wrong?!

I have a timeline which moves the x position of a really long div to the left. When you hover over a button it will trigger the timeline. However, I can't seem to get the timeline to move continuously. I've tried setting a repeat and an onComplete function to loop the timeline but neither of them worked. I did manage to move the long div using setInterval but when you mouse leave the button the tween animation doesn't stop instantly. Here is a codepen of the setInterval example - http://codepen.io/anon/pen/GZvLVp and here is a codepen of the timeline example - http://codepen.io/anon/pen/BKdeBQ I guess ideally I would want to use a timeline so I can pause the animation on button mouseleave right?

I'm trying to create a parallax effect by animating the background y of an image. I'm planning on using ScrollMagic to manage the duration property and feed this object to it. I'm making a ```new TweenMax()``` however it's ignoring the ```immediateRender: false``` property and beginning its animation right away. var tween = new TweenMax($("#parallax1"), 1, { backgroundPosition: "0px 200px", ease: Linear.easeNone, immediateRender: false }); Can anyone tell me why this isn't working?

hi all, im trying to create a slide effect for the side nav and just after that a stagger for the `li` but I'm not sure how to get it done. i've tried two separate setTween() and also onComplete but i obviously doing something wrong this the animation plays wrong or not at all. so again, I just want the navbar to slide in when im scrolling to it and immidiatly after i want to `li` (.btns) to animate to var sideNanFrom = { opacity:.3, width:0, ease:Elastic.easeOut, onComplete:sidNavBtnTween } var sideNavTo = { opacity:1, width:130, delay:0.4 }; var btnsFrom = { scale:0, opacity:0, delay:0.9, ease:Elastic.easeOut } var sideNavTween = TweenMax.from("#secondary_nav", 0.6, sideNanFrom, sideNavTo) var sidNavBtnTween = TweenMax.staggerFrom(".btn", 1.5, btnsFrom, .2 ) side .setTween(sideNavTween) .setPin('#secondary_nav ul') .addIndicators() .addTo(controller); }

Hi, I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such $('#logo').css({ 'min-width':'200px' }); And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. Any guidance would be appreciated!

Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio

Hi, I've created a timeline and tweento buttons that are working as I have hoped. What I also need to happen isa scroll to trigger the same as the click function. For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. $("#two2").click(function(){ tl1.tweenTo('slide2'); }); Any pointers much appreciated. Thanks!

Hi there. I have just started using GSAP and want to animate the viewport attribute of the SVG inside a Object tag. This is the code I have but doesn't seem to work. var tl = new TimelineMax({delay:.5}), svgDoc = document.getElementById("SVGobject").contentDocument; TweenMax.set(svgDoc,{attr:{viewBox:"250 0 250 250"}}); tl.to(svgDoc, 1.5, {attr:{ viewBox:"0 0 1000 1000"}}); Once i have this working the ultimate aim is to trigger an animation of the viewport via an onClick event. Currently I just change the viewport via an array, so any help on this bit too would be very much appreciated. var interactions = { 'Button1' : '414 0 414 736', 'Button2' : '214 0 414 736', 'Button3' : '0 0 414 736', 'Button4' : '828 0 414 736', };

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.

Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil

Hi! i can't rotate a two faces box correctly with TweenMax but with pure CSS it works fine. TweenMax version http://codepen.io/glegenty/pen/adxpQy CSS only version http://codepen.io/glegenty/pen/VeNpwE i don't see what i'm missing. Thanks for you help

Hello again. I decided to create a new Topic here for my problem (link here), so I dont pollute the JS Forum (more than I have so far). I also wanted share a solution and ask if its the right way of doing it. So let me start with the problem from the previous Topic. ------------------ part 1 - the problem ---------------- The problem is that the code (listed below) is working fine for JavaScript, but when I try to do the same thing with AS3... I fail (maybe the problem is in me). Here is what I have : var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var tl = new TimelineMax({repeat:1, yoyo:true}); tl.to(myMovieClip, 5, {x:500, ease:Linear.easeNone}) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0); (I know that myMovieClip is unnecessary but to be sure that the problem doesnt come from something like "the problem is that the provided displayObject doesnt have a Timeline". PS: I also tried addressing rectangle directly, but nothing changes) After some time and reading, I finally got to a working solution with this code : var tl:TimelineMax = new TimelineMax({repeat:1, yoyo:true}); tl.to( myMovieClip, 5, { x:500, ease:Linear.easeNone } ) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0 ) .to(myMovieClip, 2.5, { scaleX:1, scaleY:1, repeat:1, yoyo:true, ease:Linear.easeNone }, 2.5 ); yet..... It seems like its not the right way of doing it (I may be wrong ... and it is indeed the right way) Am I missing something? ------------------ part 2 - is this solution good? ---------------- After a while I decided that I want to change the animation effect a little bit. Let me list the whole process again, so its clear what Im trying to do. (the only change from the previous post (link here)is in step 2.2) 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled UP by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it up by '2', it has to have width = '200') 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled DOWN by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it down by '2' it has to have width = '50') 2.3 - at p.A, Object has scale = 1; the code that I have for this animation is this: var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var duration:Number = 5; TweenMax.to(myMovieClip, duration, { x:500, repeat:1, yoyo:true, ease:Linear.easeNone } ); var scaleFactor:Number = 2; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, onComplete: changeScaleFactor, ease:Linear.easeNone }); function changeScaleFactor() { scaleFactor = 0.5; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, ease:Linear.easeNone }); } As you see..... I only use TweenMax for the animations. Any help or suggestions(with a little provided code if it is possible) for a better solution would be gladly and highly appreciated.

Hello. I have this Object (a regular cube) that I need to move from point A to point B and while doing that I need to change its scale properties. Let me show you what I mean. And the task gets even worse when I need to revert the animation after that. What I mean is : 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled x2 (which scale transition needs to be fluent and too) 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled x2 (which scale transition needs to be fluent and too) 2.3 - at p.A, Object has scale = 1; I was thinking of using: TweenMax.to(object, duration, {x:B, onUpdate: fluentlyScale }); where fluentlyScale is a function that will handle subsection steps .2 (at p.AB/2 the Object also needs to be scaled x2), but .... how do I tell it when the object has reached the middle point in which the scale has start decreasing. I also thought of an option where I use more then one TweenMax function, something like this TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true}); TweenMax.to(object, duration, {x:B, onComplete: reverseEffect, repeat: 1, yoyo: true, }); function reverseEffect() { TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true}); } but.... first: It doesnt quite look like the right way and second: when will the onComplete trigger? after the repeat and yoyo effect have been applied or before that ? i.e. onComplete will trigger when Object has reached point B or when it has returned to its point of origin (pointA). Any help will be gladly appreciated.

Hi, I'm working on an animation where I animate the scale, and other properties of the body tag. The scale goes from a value of 1 to a bigger value to create an effect like in Prezi, to zoom in to an element of the page. Just as is, this makes the element shown very blurry, but I found out if I set the tween's force3D property to false, it will be sharp (good) at all times. But this also makes the whole animaton very laggy. I tried to change the force3D property while animating, so it renders only a few times during the animation, to both avoid blurriness, and lag, but I don't know how to set it in the onUpdate function. So my question is, if I set the onUpdateParams to ["{self}"], what can I do in the onUpdate function with that object? (I tried calling .set() and .updateTo() on it)

Hi, Trying to build a Greensock lightbox. Am I doing this the right way? When I close it, it won't reopen. Also, am I building this correctly so that I could add another link / lightbox once this works? Thanks, Phil

Hey folks, either I´m blind or there is no answer yet to my question: I would like animations only to happen once when scrolling in, but when scrolling out (backwards, so the trigger is active again) and then scroll in again I dont want the animation to reverse and run again. So long story short: the animation should only be triggered once and then the animated elements should stay where they are forever indepently of scrolling back:) I found only this http://greensock.com/forums/topic/7832-disable-reverse/ but it seems not to be up to date anymore. Is there a simple way to achieve this? Or do I have to remove the listener by hand, once the animation finished? The snippet shows that the "false" parameter doesn´t help here (just in case here without false parameter: http://codepen.io/anon/pen/zrJVLQ )... Thanks in advance for any possible help. Somehow I feel this should be very easy to achieve, but I didn´t manage to make it work.. Greetings, Paul

Hi everyone, like you can see in the codePen I'm working on something like an app-onboarding. It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another. Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" function I set the other timeline to the beginning using "tlLeaving.play(0)". What am I doing wrong? Thanks!

what can i use instead of transform-style in IE?

Hi Guys, I have made my own boilerplate and pretty much utilized TweenMax to the best of my knowledge in my project. Here is the link (http://masterbuilder.infiniteimaginations.co/). On a mobile device (Nexus 5, iPhone 6, etc), the mobile menu is a bit choppy. I would like to blame the device itself but I know TweenMax is good in complex animations. Can anyone help me out here in optimizing the code? Thanks in advanced

Hi, normaly I am adding Tweens to my Timeline with TimelineMax.add(). Is there any diffrence (performance etc.) between TimelineMax.to() and TimelineMax.add(TweenMax.to()) ? Or is it just the same?