Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.

  • 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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello, I want to make a drop down menu. You first have to click on 'discover' and after that you can hover over elements to let them appear/dissapear. I also want that you first have to hover over, for example, the 'Sail's' before you can hover over the block under it: 'Jib Sail' & 'Main Sail'. My problem is that even before you click on 'discover', you already can hover over the Jib & Main sail. Is there a way that I can put this in a timeline, so that you only can hover over it after the timeline is done? Codepen: http://codepen.io/xleooow/pen/WGqddQ Thanks for your help!
  2. Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0? function createTimeline(progress, ...elems) { let tl = new TimelineMax({ paused: true }); tl.add('beginning') .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone }) .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning') .add('middle') .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false }) .fromTo(elems[1], 1, { y: '0%' }, { y: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle') .add('end') .progress(progress); return tl; } I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for. I can make a CodePen if that would help. Thank you! EDIT Heres a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010
  3. I am missing something that I know should be easy for someone well experienced. I have only a couple of months of web design experience. I have a intro timeline and another one trigger on scroll. Both attach to a scrollmagic controller. The intro should finish before the user scroll down. I tried to overflow: hidden on y axis etc... doesn't work. But hidden the scrollbar is not good User experience. IF the intro played completely the first scene is good and reverse fine. But when the user scroll down to the first scene (of 6 scene total) and the intro is not done everything break down when the reverse of intro is triggered. And if windows is refresh on scene1. The intro start. IS there a way to somehow reset the intro timeline if the user reverse back on intro when they scroll down to scene1. And to lock the intro animation when refresh on scene1 or scene2 ...3....Maybe it's a scrollmagic coding but maybe greensock has a specific code to resolve this http://codepen.io/dominium/pen/zKyZZd Thanks in advance
  4. Hi there! I'm trying to create a very simple 'carousel' using GSAP's TimelineLite that I will be controlling with buttons and dragging/swiping. Initially, all items of the 'carousel' will be translated -100% to the left of the viewport except for the current item, which will be translated 0%. let $items = $('.container').children(); function init() { initTimelines($items); } function initTimelines(items) { for (let i = 0; i < items.length; i++) { if (i === items.length - 1) { createTimeline(0.5, items[i]); } else { createTimeline(0, items[i]); } } } function createTimeline(progress, elem) { let tl = new TimelineLite({ paused: true }); tl.fromTo(elem, 1, { x: '-100%' }, { x: '0%' }) .fromTo(elem, 1, { x: '0%' }, { x: '100%' }) .progress(progress); return tl; } init(); All I'm doing is looping through the divs with .item as a class and creating a timeline for each one. If it is the last .item, I'd like for it to start halfway through the timeline. In the future I'll be controlling the timelines through the progress method from drag/swipe and click callbacks. You'll see that when I create the TimelineLites setting paused:true all of the .items are on top of each other in the viewport. Since the first line of the timeline is fromTo(elem, 1, { x: '-100%' }, { x: '0%' }), I would expect those .items to be translated -100% until I play the timeline or set its progress to something other than 0. Now, in that createTimeline function, if I set progress to be 1, everything is translated 100% like I would expect. If it is 0, however, the items aren't translated -100%. Why is this? If you toggle paused: true to paused: false, you'll see the timelines work, but it flashes from 0% then translates to -100% and plays the rest of the timeline. I hope that makes sense. If you need anymore clarification let me know.
  5. http://codepen.io/anon/pen/WGdWqL If I remove addPause line, the animations end as they should. With it, for some reason red (stalled) block goes nuts Could be that this is a bug? If I want to use addPause and modify red block in end of it's tween, how can I get around this?
  6. Hello, I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline. The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100. For the basic behaviour, fading in and out, I have this: $.each($('.slide'), function(i) { tl.add([ TweenMax.to($('.slide-' + (i+1)), 1, { opacity: 0, immediateRender: false }), TweenMax.to($('.slide-' + (i+2)), 1, { opacity: 1, immediateRender: false }) ], '+=1'); tl.add('slide' + (i+1)); }); }); Notice that I'm also adding a label after each step. At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3. I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this: tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1'); What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter. Am I again missing something about the position or my approach is totally wrong?
  7. 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 and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble
  8. Hello, I'm using GSAP to build scroll controlled animation using a timeline. 1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left. 2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle. 3) the whole thing needs to be responsive I managed to do almost everything, but the point 3. In order to make it responsive, I set a fixed maximum size to the container div and on window loading I check if the window is smaller than this size, in which case I scale everything. So, the scaling works pretty well, but it messes with the calculations I made for the animation. In the pen I created I'm trying to stop the animation exactly when the left border of the third rectangle reaches the black line. At row 32 I'm calling the resize function to set the initial size. If you comment this call out you can see that it works fine, if you leave it, the rectangle will be always slightly off. Why is this the case?
  9. Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble
  10. Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!
  11. lifvic

    Drag Action

    Hi, It's still the same question I posted before. I apologize if it was confusing. I think I found a better way to ask it this time. Problem: The jellyfish's tentacles stopped animating like it used to or it is only animating partially after being dragged, while the head was still animating the whole time. My thought process of creating this animation is: head and tentacles rotate, scale and move -- the original state, stored in the original function function original() { tlAll .to(total, 30, { bezier:path, ease:Power2.easeInOut } ); tl .fromTo(head, 3, {scale: 1, y: 0}, {scaleX:.8, scaleY:1.2, autoAlpha: .8, ease:SlowMo.config(20)} ); feetLeftTl .to([top_first_left, bottom_first_left, top_sec_left, bottom_sec_left], 3, {y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}); feetMdTl .to([top_middle, bottom_middle], 3, {y: 10, scaleX: 0.8}); feetRightTl .to([top_sec_right, bottom_sec_right, top_first_right], 3, {y: 10, scaleX: 0.8, rotation: 10, ease:Sine.easeInOut}) .to(bottom_first_right, 3, {x: -4, y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}, 0); TweenMax.to("#light feGaussianBlur",3,{attr:{stdDeviation:5},repeat:-1,yoyo:true}); } the whole jelly fish can be dragged to move towards left or right, during which the head and tentacles rotate slightly to the other direction to create a sense of water resistance when the dragging is finished, the jellyfish should go back to its original animation -- the part that I can't figure out Draggable.create("#total", {type:"x,y", edgeResistance:0.65, bounds:"svg", throwProps:true, autoScroll:true, onPress:function() { startX = this.x; startY = this.y; }, onDrag:function () { var xChange = this.x - startX; var yChange = this.y - startY; if(xChange < 0) { //to the left TweenMax.to(head, 1, {rotation:5}); TweenMax.to(feet, .6, {y: 15, rotation:-10}); } //to the right else { TweenMax.to(head, 1, {rotation:-5}); TweenMax.to(feet, 1, {y: 10,rotation:15, ease:SlowMo.easeInOut}); } }, onThrowComplete: function () { var reset = new TimelineMax(); // // // reset var newhead = new TimelineMax(); var newfeet = new TimelineMax(); newhead.to(head, .5, {rotation:0}); newfeet.to(feet, .5, {y:10,rotation:0}) reset .add(newhead,0) .add(newfeet,0) .add(feetLeftTl,0) .add(feetMdTl,0) .add(feetRightTl,0); }, }); But now, the tentacles stop rotating and scaling after the jellyfish being dragged and I checked the code over and over again but could not find a solution. Please advise on this problem. Thank you so much!!
  12. I hope this makes sense! I have a timeline, and I was wondering if there's a function to play the animation from its current position and pause when it gets to a specific time. Is there already a function for this, or would I have to build something myself?
  13. Hi I am trying to change a text value in an animation using a timeline, for example, i'd like the text to animate off, the value to update, and then animate on again. I need to know that the animate on doesn't start until the text value has changed. I hoped to be able to use the timline.set(textfield, {text:"NewValue"}); but it seems that set/tween can only use numeric values? How can I best achieve this result?
  14. The codepen has a tween/timeline that's 1 second. Clicking the record button steps through the animation and snaps 60 PNGs per second - so there are 60 images. The last bit of the Circ.easeIn is so fast that it doesn't make it into the collection of images. I hate to increase above 60/sec. Is there any way to add a little padding onto the end of the timeline so that last snapshot gets the end of the animation? In the codepen, when you click the record button, you see the images dropping in below and can see where the last image is snapped at the beginning of that last 60th of a second but prior to the end of the animation. The preview button shows the actual animation. For experimental purposes, I increased the FPS to 120 and it still never made it. I searched through the forum and found a post in the actionscript area that talked about adding a dummy "set" like the following: // get the duration of the timeline var totalTime = mainTimeline.duration(); var dummySet = TweenMax.set({},{},totalTime+1); When I tried that in my app I got the same duration - nothing changed. Is it possible to pause at the end and then finish? If I missed an explanation for this please point me in the right direction. Thanks!
  15. I have an app where SVGs can be dropped onto the stage and animated in various ways to build a complete animation. I'll want to give the user ability to chain together Tweens on each SVG and play them all together. There will, of course, be a main Timeline. My thought is that for each SVG that gets dropped onto the stage, create a new NestedTimeline class that would contain the Timeline, the element to be tweened on that timeline and then push tweens into it. I would add each of those Timelines to the main one. When the play button is clicked, the main timeline would play. I'm just trying to keep from painting myself into a corner. I know I've seen custom one-off timelines where various elements are tweened within the same timeline. I just don't know of a way to automated that without things getting pretty messy. Thoughts? btw, I plan to try to build something like the Timeline Visualizer lot's of folks are wishing you guys would turn into a control tool - hint, hint When a new item is dropped onto the stage, a new track would be added to the visualizer.
  16. Hello, I went throught the doc and couldn't find anything. Is it possible to set an easing function to a timeline and have it like inherited from all the Tweens in the timeline?
  17. Running into a weird issue when adding multiple tweenFromTo's to a timeline. What I expect to happen in the Codepen: When I first load it, the blocks should be resting against the black line and not be skewed. tl_master and tl_base should be paused at 0. What's actually happening: The blocks are not touching the black line and are skewed. tl_base is paused at 0.5 seconds instead of 0. It looks like tl_base is paused at the start of the final tweenFromTo added to tl_master (which is starting from 0.5 seconds). I don't understand why it's jumping there when I have both timelines paused and set to immediateRender: false. I also tried adding a position parameter to the tweenFromTo's (thinking they were all being added at the same time and overlapping or something) but that did not fix the issue. Please let me know if I can clarify anything.
  18. Can you use GSAP's timeline to execute a javascript function @ certain time?
  19. Hi, I created a timeline with lots of tweens, these tweens have delays on them and what I need is to skip all the delays when I reverse this timeline, long story short on reverse all the tweens must start immediately. Thanks in advance
  20. Hello, sorry if the title is not really clear. I'm trying to create a horizontal parallax animation with at least three layers. The end result should also be responsive, so I can't really use fixed numbers. Also, the image for the background is not the same size as the others. Let's say that the background is 8000px and the image on top is only 5000px. I want the scrolling to stop when the right border of the second image reaches the outer margin of the browser window. I kind of did it, but not quite right. In the pen I created, as you can see, after the character layer reaches its end, the background still goes on for a little while. Is there a way to avoid this? Or a better approach to the whole thing?
  21. I'm trying to have a timeline be part of multiple timelines in greensock. I guess the what I need to happen is one element needs to animate in both cases but only on or the other needs to animate in each case. Check out the codepen to see what I mean Thanks in advance
  22. Hi, For some reason, using .set within a timeline doesn't trigger. (see codepen) However, if I move the .set command to the start of the timeline, it does work: tl.set("#circle1", {autoAlpha:1}) .from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut}) Any ideas why? Thanks
  23. With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip
  24. Hey guys! I´m having a little distortion in my mainScene when i add repeat:-1 to its timeline. When repeat:-1 is added to the mainScene timeline the animation changes, in particular the "thirdsetScene". I hope somebody can help me with this little issue, making the manScene run as it should with repeat:-1 to loop infinitely. Thanks, thanks and thanks!
  25. Hi there, I'm a bit new in using GSAP. Recently I have made an animation with high def images and svg shape morphing. I think i'm doing something wrong because this animation is really laggy when I use delays between each elements. If I play them together at the same time it's really smooth but it's not the effect I want. Any advice here ?
×