Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tweenlite'.

  • 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. Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?
  2. Hey everyone, Image you have a cartoony chess game. And you're sliding the queen from one end of the board to the other. I want to add a teetering effect, with the piece pivots on it's base a bit to begin it's slide, and then teeters in the other direction when it ends. I have the pivot centre at the bottom center, but I can't seem to find an elegant way to pivot back and forth. So what I've done is: var maxTilt:Number = 10; // degrees var slide:TimelineLite = new TimelineLite( { autoDispose:true } ); slide.add(TweenMax.to(obj, DURATION / 4, { rotation: -maxTilt} )); slide.add(TweenMax.to(obj, DURATION / 2, { rotation: maxTilt } )); slide.add(TweenMax.to(obj, slide.add(TweenMax.to(obj, DURATION, { startAt: { x:from.x, y:from.y }, x:to.x, y:to.y, ease: Back.easeInOut.config(1.0) } ), 0); DURATION / 4, { rotation: 0} )); Problem is the nice ease effects can't be transitioned between the tils. Is the best way to do this? I hope not. Thank you! Mark
  3. 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; };
  4. I have put together a compilation of 11 short videos with quick demos explaining the basics of GSAP API to a complete beginner. If you just staring out with GSAP this might be a good place to start. Go To GreenSock 101 Happy tweening. PS: If you happen to sign up and go through the free course, please let me know what you think about the content. Your feedback is very valuable.
  5. 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); }
  6. I've been meaning to learn GreenSock for some time and have been trying to justify the cost of onsite trainer to management for some time since we are getting asked to do more and more banner work. But as a complete newbie to TweenLite, I am wondering if it would be a good solution to a problem we have right now. I am drawing an arc on a canvas and am trying to tween just the endAngle var. Since this isn't an attribute of the canvas itself, but a var within it, I'm not sure if TweenLite is what I am looking for. I've linked to a very quickly thrown together example. Any help would be much appreciated.
  7. Stumped on this. I would like to use the attr plugin to do a simple animation for my banners, basically just have an image animate in from the side or top. This page makes it seem like I could use the attr plugin to animate the x, y coordinates of an element. I can get the heigh and width animation working as long as I use a table, but can't figure out how to get the x and y working. https://greensock.com/AttrPlugin My html and scripts are attached. Archive.zip
  8. This code successfully brightens, then dims image brightness (via the css filter attribute): TweenLite.to($(this).children('img'), 0.1, { css: { '-webkit-filter': 'brightness(1.75)' }); TweenLite.to($(this).children('img'), 1.5, { css: { '-webkit-filter': 'brightness(1.21)' }, delay: 0.15 }); However, I'd like to tween the brightness level to get a smooth transition (rather than the current stepped/chunk method that this code produces). Is there a GreenSock solution/approach to tweening at this level?
  9. Hello all. I have a container as below: .section-fixed{ position:fixed; width:0px; height:0px; top:-280px; right:-280px; overflow:hidden; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:transparent; opacity:0; z-index:10; } which there is a few items within it: .item-f{ text-decoration:none; top:calc(50% - 15px); left:calc(50% - 15px); position:absolute; border-radius:50%; width:30px; height:30px; text-align:center; color:black; font-size:25px; cursor:pointer; } <section class="section-fixed"> <div class="main-menu-f"> <div id="HomeButton" class="item-f">A</div> I wrote a code with TweenLite as below: if(//some condition){ TweenLite.to('.item-f:nth-child(1)', 0.6, {x:0.98 * -220.56290407832017,y:0.98 * 30.932307155207802,rotation:360,autoAlpha:1,ease:Back.easeOut.config(1.87)}); else{ TweenLite.to(".item-f:nth-child(1)", 0.6, {x:0,y:0,rotation:-360,autoAlpha:0,ease:Back.easeIn}); } The problem is for when if condition is true, unfortunately ease function doesn't work correctly and the element moves in its way, simply. But when the else condition is true, Back.easeIn done correctly. What's going on? Can everybody help me at this?
  10. I am looking for a way to use the staggerTo, etc. methods on TweenLite, but am not sure what plugin file to include. Plz help
  11. Hi there! I have many shapes in EaselJS -not spritesheet, only shapes- (shape_1, shape_2, ..., shape_n) which are different frames of the same object and I want to animate them with TweenLite to display all the frames (1,2,3,4,...), like an animated movieclip in flash. I have seen that with CreateJS TweenJS works this code: this.timeline.addTween(createjs.Tween.get({}).to({state:[{t:this.shape0}]}).to({state:[{t:this.shape1}]},1).to({state:[{t:this.shape2}]},1).to({state:[{t:this.shape3}]},1).to({state:[{t:this.shape4}]},1).wait(1)); to display sequencially all the shapes... Is there any equivalent in TweenLite? Best Regards Rosa
  12. I have created a rss feed ticker in as3 with TweenLite. Flash FPS is 24. When I run this, the scroll animation is not smooth. If I change the FPS to 120, it appears very smooth. There are many different movieclips on stage which may have their own animation, so I can not change the Flash FPS. Is there any way available in TweenLite where I can change FPS for this movie clip only?
  13. 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?
  14. Hello, my problem is, I have some styles inline in a element: <div id="myDiv" style="display: inline-block; position: relative;">Some Text</div> And I'm trying to animate this div, like this: TweenMax.to($('#myDiv'), 0.6, { parseTransform: true, alpha: 1, left: 0, top: 0, scale: 1, ease: 'easeOutBack' }); How can I use TweenMax without removing my inline styles? Thanks.
  15. Hello! I am trying to work out something where there's two side panels that can be collapsed to make the middle panel bigger. I have it 75% of the way there -- the only thing that doesn't work is that if you try to collapse both side panels, the middle doesn't go to it's full size (just stays at it's 3/4ths size as if only one panel is closed). I've done everything I could to get the codepen to work but even though it has everything in it that works outside of codepen, it won't actually animate and I can't figure out why, so I uploaded everything to my private server to show that it does work. http://tinyurl.com/q4smgxp Forgive if it isn't the most elegant code - I'm still learning jquery and GSAP! Anyone have thoughts on how to make it actually open up fully when both side panels are collapsed? Thanks!
  16. Hello, at the moment I have a div that rotates infinite with normal css animations. But I want to do it with Greensock, because i want the animation to be more responsive depending on what I click. The idea is that I want the div to start rotating after clicking a button. It start slow and builds up speed. After 1 Second it's on full speed and keeps rotating until I press the button again. Then it should decrease the rotation till it stops. Could somebody point me in a direction? I would prefer to use tweenLite if that is possible.
  17. Hey there, I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it. In the provided codepen, please check the JS imports. It's only TweenLite. Why doesn't it work like this? I tried importing TimelineMax only, too, then added a var tl = new TimelineMax(); Nope... How can I make good use of the smaller libs? Thanks guys, Laser
  18. Hello! I am building a timeline visualizer, that you can easily connect with any timelines you've made with gsap. The idea is to represent the timeline visually, and let the user scrub through it. It's easy to visualize the labels, since there is a _labels property on each timelinelite instance. However, what I would like to know is: Is there any good way to get a reference to all tweens within a timeline, and all function calls? I'd like to know the time and duration of all tweens within a timeline so I can represent them visually, and also the time and name of all function calls within a timeline. Is this possible? Thank you. /Alexander
  19. 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 });
  20. Hi all! I have some strange error with ie 11 (may be earlier versions too). Here is a simple example of my code: var gfx_obj = {}; gfx_obj.r1 = 1; gfx_obj.r2 = 1; gfx_obj.r3 = 1; gfx_obj.r4 = 1; function appearGFX(num) { TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut}); } appearGFX(1); So this gives me error in IE only (all other modern browsers is OK). Screenshot of error is attached. Any thoughts how to fix it?
  21. i have a little carousel and its not tweening to the full duration. i have the tween time set to '0.5' when you click on the "<" button the first 2 times it works, the 3rd time theres no animation as though the duration is set to '0' same if you click on ">" first 2 times its good, 3rd not tweening. am i setting something up wrong? thanks
  22. Hi guys, Coming back to this forum for some simple trouble ! I have a flexbox layout, which tweens in many ways, and through many efforts GSAP and flexbox work (almost) perfectly together ! Everything works fine in latest Chrome, Firefox and IE (well, some minor border-radius tweening trouble in IE, but... meh). The troublemakers are Safari / Safari iOS / Chrome iOS and buddies, which still need vendor prefixes for flexboxes. As pointed out in this topic, we can set() prefixes in CSS PROPERTIES this way : tl.set($('#myDiv'), {css:{"-webkit-flex":0}}); But how about setting prefixes in a CSS property VALUE ? I have tried things like : tl.set('#myDiv', {css:{display:'-webkit-flex', display:'flex'}}); As I feared, it seems to be considered a duplicate by browsers. Testing various situations, I think only the last instance of 'display' is applied, which seems only logical. Depending on the order, I get my tweens to work on webkit-based browsers, or the others So, the questions are : - is there a way to set display right cross-browser ? - is there a way to do it simply ? xD Cheers to all the GSAP team, you're awesome ! ================================================================================ EDIT : While looking for an answer, I got to : this stackoverflow topic Based on the answers there, I got some workarounds with no tweens : toggling an HTML "flexBox" class with jQuery for instance. .flexBox { display: -webkit-flex; display: -ms-flexbox; display: flex; } function addClassFlex(elem) { elem.addClass('flexBox'); } tl.set('#myDiv', {onComplete:addClassFlex, onCompleteParams:[$('#myDiv')]}); Since I need this to happen at a precise point of my timeline, I got nothing better than this callback yet. Does it sound ok to you guys ? Anything better to propose ? (awful use of callbacks, and I dislike messing with styles in the HTML...)
  23. Hi, probably an easy question for most of you, but I searched a lot and I didn't find anything (english isn't my first language so...) I'm obviously a new user of GSAP and I saw uses of x and y properties used to move an object, is it possible to do it without CSSPlugin? Maybe I should put this question in banner section, because I would like to only use TweenLite.js for banner ads, a matter of very restrictive weight in multiple platforms Ads Exchange campaign. In short, I mostly want to know what I can do with TweenLite.js only. Can we move object like this TweenLite.to(element, duration, {x:200}); ? And last question : Is it better to use .delay() to create a kind of timeline or we can chain tweens in each onComplete for the next one. My test didn't work at all for onComplete but I need a confirm to be sure I didn't made a mistake. Thank you for your attention
  24. Hi everyone ! Hope you are fine. I come to you because I am trying to make a carousel with images fading in / out. I decided to use opacity (maybe it's not the best way to do it) and JS. I succeed to do something with JQuery but the performance were a disaster. Made my browser (chrome) crash. Then I decided to make it with javascript and tried to realise something as light as possible (hard task). But, when I thought my algorithm was good I was in front of 2 problems : 1) I don't succeed to make it infinite (not too hard to do) 2) I have an error during a loop : Cannot tween a null target. I put some console.log everywhere at every stage but impossible to localise the moment where I am sending a null object to TweenLite. Dafuq So, as you will see in my (short) codepen, am I missing something ? I deeply thank you in advance for the time spend on my request.
  25. Dear GSAP developpers, First of all, thanks for your library, which is now the only source of animation for the website I'm coding. Despite all my efforts, I can't find a way to work around my wish to use the same tween in multiple timelines. Yes, I can easily play a Tween and reverse it whenever I want (see the Codepen)... Yes, I can easily create a Timeline for one specific situation... But no, I can't find how to control a tween being played in a timeline from another timeline ! This Codepen's HTML describes what I would like to achieve. The buttons perform as I expect them to, except for the sequence requirement (#hero1, THEN #hero2). Obviously, I would like to use a TimelineLite for each sequence (using delays is not an option if the number of tweens involved increases), to allow the opening/closing of each #hero to be reversed midway if the user decides so. I guess my trouble comes from this (found in FAQ) : Any idea on how to get the behaviour I describe in the codepen's HTML ? [EDIT : I initially came to GSAP to avoid using callbacks, please don't tell me that's the solution :/] [EDIT : I just realized the problem as I put it is easy to solve. What I need is to AVOID at all costs using more than one tween for each object I work on. No problem with maniuplating in any way the tweens I declared, though. This forked codepen doesn't work, due to the funny behaviour when you quickly click on buttons]
×