Search the Community
Showing results for tags 'timeline'.
-
Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function displayContent(){ $selectedTab.css({display:'block'});// display selected tab }
-
Hi guys. I'm only about a week into GSAP and I've become stuck on trying to reverse the timeline on complete, then repeat infinitely. I can only mange to do one or the other, not both. I reeaaaallly tried to fix it myself using answers from other forum posts, but the solutions offered there just don't work in my pen. I would really appreciate it if someone could fork my pen and tell me what i'm doing wrong. Thanks in advance!
-
Hello all, This is my first post in this forum. I have recently started using Greensock in my projects and it's the best javascript plugin out there on internet. So thank you so much for making this and helping people like me. Here is the codepen url: http://codepen.io/cooldhavs/pen/GrBraM This example uses Scrollmagic and Tweenmax timeline. My question is, when I resize the window below 990px, animation should stop immediately and it should show fixed layout below 990px. So when I resize window below 990px, all the boxes should stay touched at the bottom left corner and won't do any animation. But when browser window is below 990px and i am in the middle of the page and I resize the window to more than 990px, animation should start from the right point. I am not sure if this is good enough to explain the problem. So let me know if you require more information on the issue. I have used this kind of animation in two different projects and I am not able to find any answer to this. So please help. Thanks, Dhaval -
Hi, I made this tool called ScrubGSAPTimeline a while back that enables you to scrub through a timeline using your mouse. Not sure why I never posted it here. Or maybe I did - my memory is terrible. Anyway you can move your mouse out of the window to play the timeline animation and it plays from where your mouse was inside the window - so if your mouse was 45% along on the X axis of your window when it left, your animation will play from 45% of the way through the timeline's duration. You can also double click to pause scrubbing. This is useful if you want to right click and inspect an element in dev tools. You'll need to set the position of your main DIV/SVG container to absolute (I think!) otherwise you won't see the time display. I use this on every single animation project I make now so I hope you find it as useful as I do. GitHub https://github.com/chrisgannon/ScrubGSAPTimeline CodePen demo: http://codepen.io/chrisgannon/pen/zGmdBN Cheers, Chris
-
Hello, I'm having two issues right now, which I cannot figure out. Issue #1 I have an animation in my CodePen using the first button, and when it finishes it's animation cycle it reverts the cssText back to it's original position. This is for a "preview" animation set up in my software. This will essentially revert back to the original position, so the user can modify their design layers, animation settings, etc, before playing their animation again. However, on the second run of this animation it seems the translated position is not working properly or some sort of caching mechanism is not recognizing the reverted cssText. It gets stuck to the left of the box where it was on exit. To give more details on this, my design software works based off finished designs, and once a design is finished the user can choose to have things enter the screen at different timings (as well as optionally exit after) I provide entrance, exit animations and in this case it rotates in from left, and rotates back out to the left. If you need more clarification, let me know. Issue #2 I'm having an issue with setting up a timeline without automatically playing. I've added the flag "paused: true" in the TimelineMax options, but what this does is begin positions for the element where the TimelineMax.from() defines, rather than keeping the element in it's ending position until we trigger play to run. I use a chained method in my code prepareAnimationTimeline() which should add all the timings, animation tweens together but returns the timeline object back ready to play, while not moving my elements. I use it like this: prepareAnimationTimeline().play() However if I do not call play, with paused: true, it will simply move my elements off screen in their starting positions for my entrance animations. (TimelineMax.from()) Is there any way to achieve what I'm looking for, where I keep elements on the screen and "prepare" my animation timeline in the fashion I mentioned above? Thanks, Justin
-
BG image moves across the stage poorly, in a stepped fashion, when viewed in Firefox but runs smoothly on other browsers like Safari and Chrome. I'm on a Mac so I'm not sure how it appears on other. What am I missing in my code? http://motion.hotternellstudios.com/KICK/ad/
-
Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob
-
I have not made a codepen. It's basically that. I want to know how I can force the timeline to finish animating to the end or beginning. Just want the elments to return to the initial state without tweening while scrolling using scrollmagic or basically to press a button. I have tried pretty much all the timelinemax methods without success. somebody here with much experience then me should know. Thanks so much
-
As you can see, I am trying to see if Timeline's progress is 0, then I play it and it expands the menu (empty) underneath, if it's 1, then it reverses it and folds the menu. Individually, everything works as intended. However, in order to avoid overlap of menus, I want to close the "other" menu before opening the target one, so I do Timeline.progress(0) to simply reset it to it's folded state. Unfortunately, this causes the timeline to reset to 0, and then to start playing again, which is not expected from the code... What am I doing wrong?
-
Hi. I have not been able to find a solution and was hoping someone could help. Basically, I am trying to fade in/out an svg during the animation. At start, I would like to have the opacity transition from 0 at 0 seconds to 1 at 5 seconds (or half way through) and then again transition to 0 at 10 seconds (or the end of the animation). I need this animation to repeat infinitely. How can I achieve this? var snow = $("#snowflake"); var tl = new TimelineMax();var bezierPath = [{ x: 5, y: 4 }, { x: -5, y: 8 }, { x: 5, y: 12 },{ x: -5, y: 16 }]; tl.add(TweenMax.set(snow,{autoAlpha:0}));tl.add(TweenMax.to(snow, 10, { bezier: { type: 'soft', values: bezierPath, smoothOrigin: true, timeResolution: 12, autoAlpha:1 }, ease: Linear.easeNone, repeat:-1, autoAlpha:0}));
-
I am trying to create a timeline where the target can be updated dynamically. When .play() is called, I want what is tweened to be based of the current $(this) jQuery object. The way I was attempting to do this does not seem to work. The codepen is a simplified version of my attempts: http://codepen.io/sithsev/pen/ENEbLz Is there a way to use a argument or parameter for this?
-
Hello, I'm trying to use the method seek() to jump to a label in a nested timeline. The real example is a bit complex to reproduce in a codepen so I constructed a useless one just to show the issue. Baically I have a series of small animation contained in a another animation. This animation (the external one) has a duration equal to all the small animations inside. I would like to be able to jump to each of these animations, but apparently I can't. I'm sure there's a good reason for this, but is there any way to achieve what I'm trying to do?
-
Hi there, I am quite new to Gsap, I purchased the dev licence - its been great. I have stumble onto a bit of a problem though. I am trying to create a timeline which triggers animations along a path. Note: .to("#circle", 20, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone, repeat:-1}) works on my local machine, but .to("#circle-2", 20, {bezier:{values:pathTwo, type:"cubic"}, delay: -21, ease:Linear.easeNone, repeat:-1}); does not work
-
im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance
-
var d1=document.createElement("div") document.body.appendChild(d1) d1.style.left="0px" d1.style.top="0px" d1.style.width="100px" d1.style.height="100px" d1.style.position="absolute" d1.style.background="#ff0000" var p3to=new TimelineMax({repeat:-1,paused:true}) p3to.to(d1,1,{autoAlpha:1,physics2D: {angle: 0,velocity: 300,gravity: 500}}) p3to.to(d1,0.3,{autoAlpha:0},"-=0.3") p3to.render(0) p3to.play() it will throw an error Uncaught TypeError: Cannot read property 'length' of undefined
-
Hey, I wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation. I feel that the solution is very easy, and I sit on it far too long to find them. CodePen: http://codepen.io/anon/pen/mOmbza
-
I am using https://github.com/scottschiller/SoundManager2/ to play sounds in timeline. I am trying to launch "empty" animation with sounds execution using labels. So i would be able to define sound once, and then just repeat it with other animation in the future. Sound in codepen shoud play 3 times but it plays only once. What's wrong?
-
Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position. I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this? Thanks in advance! .to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25") -
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
-
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
-
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!
-
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.
-
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?
-
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?
-
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
