Jump to content

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

Search the Community

Showing results for tags 'tweens'.

  • 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. //old way tl.add([ //single hop TweenMax.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: Power1.easeInOut}), TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}), TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}), ],0, "sequence"); //new way tl.add([ //single hop gsap.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: "power1.inOut"}), gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}), gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}),
  2. Hi, Please scroll down and then up, in CodePen Pin. When I start scrolling down, animation works perfectly. If I scroll up, animation works reverse but the box does not keep original size and position. How can I fix that? Thanks!
  3. Greetings, I'm new at GreenSock ( first project ) and as you may guess, I do have some struggles, I want to group the tweens in the timeline, rather than going individually, first two goes at the same time and then the second two and so on... I really try to figure out by myself, I add a minus delay but it's not working properly with ScrollMagic or I can't make it work. Here is my code: let controllerPerspectiveFirst = new ScrollMagic.Controller(); perspectiveTimeline = new TimelineMax(); perspectiveTimeline .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha:
  4. Hi! Here is my issue. I have an animation with a TimelineLite. This TimelineLite contains others nested timelines. Basically the main one is just tl.add(t1).add(t2).add(t3).add(t4).add(t5); So here is my problem now. I want to play either of theses timelines through a global one. Depending of the button click, I'll add one of theses timelines. ... master.add(tl); master.add(t1); master.add(t2); At the beginning, when I play the master with main one, it works well and the WHOLE animations is played, as soon as I play one of the nested timeli
  5. Hi, Just a neat little thing I discovered today, when using a calaculation in JS with the a possible output of 'NaN' you can prevent errors like this: var newWidth = value1*value2; TweenMax.set(element,{ width:newWidth || 0 }); Hope this helps someone out, regards, Ivo
  6. Hi All, I've created a fish eye scaling effect but it uses lots of individual tweens, it seems VERY redundant. I tried creating a timeline but it didn't work at all Would a timeline approach for this work, given I need the instance of the object being hovered?
  7. I'm trying to disable all animations in mobile viewport. I'm using enquire to detect and init animations depending on screen size. And Scrollmagic for scroll based animations. I disabled scrollmagic controller in mobile viewport. All scenarios work perfectly except one. In the event where the user starts from a deskstop and resizes to a mobile viewport, the element doesn't get trigger since properities are already applied. For example, an element has autoAlpha: 0, then in mobile viewports -> controller gets disabled -> autoAlpha is still applied and doesn't run. This is intended
  8. Hi, I created a simple roll-over effect for multiple elements on a webpage: portfolioVak1 = $("#portfolio-vak1"); // Rollover Tweens portfolio portfolioTween.to('#portfolio-titel1', 0.3, {y: "-=20px", delay: 0.1}).to('#portfolio-bekijk1', 0.3, {y: "-=43px", delay: 0.1}, '-=0.3'); portfolioVak1.mouseenter(function(){ portfolioTween.play(); }); portfolioVak1.mouseleave(function(){ portfolioTween.reverse(); }); This works perfectly! But now I want this exact same effect to happen on 30 elements on the same page. Off course, the most clean way to do this would be
  9. Have faced that need to work with a multiple "from" tweens with a same element. Of course that gave me a wrong experience with using such a "structure", like: tl.from(Intro_logo, .5, {opacity: 0}) //bla bla other tweens tl.to(the.Intro_logo, 0.25, {opacity: 0}, 'second_frame_start') //bla bla other tweens tl.set([Copy, Intro_logo], {className:"+=next-step"}) //bla bla other tweens tl.from(Intro_logo, 0.75, {opacity: 0, x: '-30%'}) will give me the result that my Intro_logo will have on the very beginning of the animation the positioning of x: -30% (as example). How can I figure it out?
  10. I am looking for capturing objects position from canvas. Here is an example http://cssanimate.com/ Is it possible to update object position from canvas to code?
  11. Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning
  12. Hello, I have a question about triggering tweens with the ScrollMagic plugin I created a ScrollMagic page where I animated with CSS, but I prefer to do transform ect with GreenSock. The problem is that when I want to trigger tweens, it doesn't work. This is the code: http://codepen.io/codesen/pen/LRLEYZ I also have a WORKING code, but this is with CSS animation, and not what I want: http://codepen.io/codesen/pen/RGpyGz I used this as an example: http://scrollmagic.io/examples/basic/simple_tweening.html I think the problem is in line 10: .setTween("#project01", 0.5,
  13. 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?
  14. I'm trying to create a rudimentary slideshow prototype that plays html container slides, loading their matching gsap animation definitions - on a temporary timeline on the fly, playing it, and then removing it (hide method, l326). The pen has two slides, when you play forward/backwards, the animation plays as expected - as the same timeline animations/properties are played back/forwards on navigation. But when you press the "jump to 1st" button on the second slide (which disrupts the linearity by playing "in" instead of reverse out) tween values that are not changed from 1 between the two tim
  15. There are often times where I'd like to alternate each line of text flying in. Or different objects flying in from different sides. Most of the time I have to get a list of the objects that I want to tween and then alternate the properties each time. Is there anything like that built into TweenMax? If not, it might be a pretty easy thing to add... I do these animations a lot. I wonder if others do to?
  16. Hey, GSAP forum. Over the past few months I've been having a blast getting to grips with GSAP, as I've transitioned my entire workflow from CSS3 to GSAP. It's had its challenges, but nobody could say this site doesn't provide enough resources to get up to speed with the library, so thanks to everyone on the team for all the great work that's done here. So my problem likely betrays a gap in my general javascript knowledge as much as anything else, but it is however intricately linked to something I want to do with GSAP. Basically I want to tween a group of elements to the value contained i
  17. Hi I am new to the forum so please forward me advice on posting if this is done incorrectly. I am using supercrollorama to animate a scroll down animation. my Questions for the forum 1) What do the different Power setting mean? i.e is Power0 slower than Power4 2) I need to slow my tween down so that it comes in as more timed tween per say so if I scroll my mousedown the animation does not shoot in it is more gradual. My code is below for the individual elements: var controller = $.superscrollorama(); controller.addTween('#third-third', TweenMax.from( $
  18. I'm trying to create a system of spawns for an as3 game. The goal is to have my enemy tweens spawn from one of the 4 different spawn points defined in the array of new Points, randomly. I've successful debugged my process so far, as the code at the very bottom illustrates. However, the problem comes when I attempt to enter my random spawn call into the starting point of the greensock tween. The code below shows if the random spawn call starts at the x value, that is to say: {startAt:{x:myArray[random]}, the problem here is that when myArray[random] is called in that manner it's goin
  19. Using SoundManager2 library, my sound has already been created. I want to call the play function once my timeline reaches the correct point. Any ideas how I can do this? Thanks in advance. tl.set("#mod5", {visibility:"visible"}, "#mod5") // call soundManager --> soundManager.play('mod5') .staggerFrom("#e5", 0.5, {autoAlpha:0, x:180}) .to("#e6", 0.5, {delay:1});
  20. I have a project where most of the tweens last exactly 0.15 seconds. It may seem like an odd number, but it's what feels most pleasing to the eye for this project. My question is: is it more efficient to specify the tween duration in frames or in seconds? I assumed frames would be the most efficient, so I converted my code to be all frame based. I set the project at 27fps and have the animations set at 4 frames, which isn't exactly 0.15 seconds, but is pretty close. But I would like things to look just a hair smoother. To get up to the next number that divides evenly by 0.15, I would n
  21. Hi, I've previously used pauseAll and resumeAll when entering a pause state of a game to halt animation. With the GSAP JS pauseAll works fine, but resumeAll doesn't resume any of the animations that we're paused, I notice the docs suggest both methods are deprecated. Are there any other suggested solutions short of manually resuming all tweens individually? Thanks Rob
  22. There is a problem with tweens in these conditions(edited): Browser has multiple opened tabs and has worked for about 10-15 min Browser was idle and then used again When I open up more then 3 tabs Code: var tweens = { main_area: { layer_buttons:{ getTween: function (_this, _properties) { return TweenMax.to(_this,0.5, { css: _properties, paused: true, delay: 0.2 }); } } }}var g = tweens.main_area.layer_buttons.getTween;var start = g($(".info", "#information-start"),{opacity: 1});$("#layers").on("mouseenter", "#information-start", function () { start.play(); }).on("mouseleave", "#information-s
  23. Hi, I am writing pretty simple game that utilizes MVC pattern. Model is calculating data stored in Array and dispatches events to View that tries to reproduce and visualize it. I wanted to implement View in the way that TimelineMax is handling the tweens by queing it up and play it at the certain point of time. Here is the mainLoop from Model public function mainLoop():void { applyBonus(bonuses); fall(); applyBonus(bonuses); dispatchEvent(new Event(BoardModel.PLAY)); } the function applyBonus or fall just dispatches appropriate events to View. The listeners to this
  24. Hey guys, I am wondering if there is an easy way to convert a 'classic tween' or 'motion tween' to use the new AS3 TweenLite? Maybe a script of some sort? I have a project that has lots of classic tweens spanned across the timeline. I was hoping for an addon to the right click menu in Flash CS6 like 'Convert classic tween to TweenLite' or something as easy. Forgive me if this has been answered already as I have searched the forums and came up empty. Thanks in advance.
  25. Not a problem, but I wondering why the following happens. I recreated a cockpit instrument environment and the tweens are updating the cockpit instruments towards the next array index value (currentSpeed, currentAlt, etc) every 0.5 second. Each instrument has its own array where to update from. The really strange thing is (which caused me sync problems before) that the speed and altitude array index is updated twice as fast as the others. However the instruments keep synced somehow.....? I'm tracing in the actionscript now only Speed, Alt and N11. How is that possible since all tween