Jump to content
GreenSock

Search the Community

Showing results for tags 'tweenmax'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. 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?
  2. 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?
  3. 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); }
  4. 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!
  5. 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
  6. 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!
  7. 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', };
  8. 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.
  9. Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil
  10. 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
  11. 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.
  12. 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.
  13. 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)
  14. 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
  15. 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
  16. 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!
  17. what can i use instead of transform-style in IE?
  18. 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
  19. 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?
  20. Hi, just wondering if anyone can suggest / advise how this site can be done? When click on the menu it because a task manager view kind. Looks cool. http://www.vangardemusic.com/
  21. 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
  22. Here's my sample code. Pretty simple. Yet it doesn't work on my server. I don't see a coding problem. Do I need to change a server setting? Url is www.leadsgopro.com. Please help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> body{ background-color: black; } html, body, #container { width:100%; height:100%; } </style> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script> TweenMax.to(".logo", 2, {left:600}); </script> </head> <body> <div id="container"> <img id="logo" class="logo" src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=512" height="150" width="150"> </div> </body> </html>
  23. Pusher

    Timeline Length

    Hi there, Is there a basic way to calculate the length of a TimelineMax animation? I do alot of banner work with Greensock and publishers have strict 15sec limits. I can't find an example anywhere. Thanks, Phil
  24. Hi, I'm fairly new to GSAP, but I'm really enjoying experimenting with it. A hurdle I have come up against is how to hover over a specific div, and have an animation play based on which div is hovered over. I do not want to have to write the animation for each div. I know the way to do this is to use the jQuery selector 'this', but I can't get it to work for a timeline. I can get it to work using TweenMax.to('') etc, but I want to be able to use play() and reverse(), and so need it to work with a timeline. Rather than me babbling on, it's probably best to just check the codepen. Thanks for reading, and I hope you can help!
  25. 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.
×