Search the Community
Showing results for tags 'Timeline'.
-
Hello friends. I ran into a strange issue: if you .addPause() to a timeline that has doesn't have any tweens inside it (only callbacks), the timeline isn't paused. See the example pen. Note that when the pen runs, both 'before pause' and 'after pause' are logged. If you uncomment either of the tweens, addPause works correctly. I know this looks a little silly, but I ran into this issue in production. I'm working on a state transition system where states have an 'enter' and an 'exit' method. The states also have a preload function, which returns a promise. In pseudo code, the transition logic looks like this: const tl = new TimelineLite(); if (currentState) { tl.add(currentState.exit()); tl.add(() => { scene.remove(currentState); }); } if (nextState) { tl.addPause(); tl.add(() => { scene.add(nextState); }); tl.add(nextState.enter()); nextState.preload().then(() => { tl.resume(); // or removePause }); } The goal is to begin preload and exit simultaneously. Then when both are done, the next state is added to the scene and it's enter animation is played. The 'enter' and 'exit' methods return a no-op function (if there is no animation for that state), or a tween (if there is an animation for that state). The issue I have is that if there is no current state (or the current state has no exit animation), AND the next state doesn't have an enter animation, the 'scene.add(nextState);' callback is triggered before the preload is complete. I can work around this in code, but I would expect the 'addPause' to work even without any tweens. Or maybe this is too much of an edge case? EDIT: Actually, it looks like both callbacks in the pen are also triggered if only the 1st tween is uncommented. But if the 2nd (or both) tweens are uncommented, the pause works as expected.
-
Hello GSAP community, I dug through the forums and tried to find if someone has already had this problem but I wasn't able to find the solution, so I thought I'd ask the community. I'm currently trying to figure out how to pause an element's animation at around 10 seconds into the the animation. I've tried using pause(), kill(), and have added a new function trying to pause the timeline, but I have had no luck. The scene in question is `scene4` in the codepen. Any ideas? Thank you very much for your time, it's greatly appreciated!
-
I have a timeline animation with an onComplete function. In the timeline I have several overlap tweens, ie. load.to('#preloadLogo', 3,{autoAlpha: 1},"-=2") The "-=2" overlaps are causing the onComplete function to fire with a delay. In the codepen example, it takes several seconds for the heading to load. When the overlaps are removed, my onComplete function fires immediately (which is what I want). How can I make the onComplete fire right away, and still keep my timeline overlaps in tact?
-
I want the car to move after the bicycle has reached its end. (How to trigger a 2nd scene only after the 1st scene is completed ) Thank you in advance
-
Hi I have a mouseenter / mouseleave effect on a button. I'm using this method to prevent a CSS / JS conflict on the button which is also part of a pageload animation. I can get the timeline to play on mouseenter, but I can't seem to get it to reverse on mouseleave? Codepen link with HTML and CSS is included, and below is the JS/GSAP code for quick reference // GSAP / JS // --- button fade in function, invoked in subsequent timeline function buttonFadeIn() { var tl = new TimelineMax(); tl .to(".btn", 1, {opacity: 1, ease:Power3.easeIn}) .to(".btn a", 1.8, {opacity: 1}) return tl } // --- invokes initial fade in on pageload function homeTitles() { var tl = new TimelineMax(); tl .add(buttonFadeIn()); } homeTitles(); // --- mouseenter / mouseleave on 'Learn More' button var learnMore = document.getElementsByClassName("btn")[0]; // --- function that is invoked on mouseenter/ mouseleave function learnMoreHover () { var tl = new TimelineMax(); tl .to(learnMore, .3, {opacity: .3}) return tl; } if (learnMore) { learnMore.addEventListener("mouseenter", function(){ learnMoreHover().play() }, false); } if (learnMore) { learnMore.addEventListener("mouseleave", function(){ learnMoreHover().reverse() }, false); }
-
Hi, I tried create similar animation in right top which you can see in the picture from this website ( https://waaark.com/ ). In CodePen is my animation. Their animation start from bottom to top but my from all sides to middle. Thank you for your advice.
-
Hello, Is there a way to remove timeline nesting? I have timelines which may play separately, but when they are nested to some combined effect, they dont .play anymore. One way I found to do this is to create another nesting, but this is too much imo.
-
I have a "simple" question (I think that it doesn't need a codePen sample). We have a variable like this: var tx = "TweenMax.to('#element',2,{textShadow:'10px 10px 10px rgba(255, 255, 255, 0.5)'})"; I take it from an xml file. Can I do something like this? tml.add(tx, s); Where "tml" is a timeline and "s" the time in seconds. With this sintax it doesn't work (no error and nothing happens). Is there some other way to do this? Thank you very much for your patience. Mario
-
Hi, I have a text slider than has two alternate text slides animating in and out within a container, and this code is animated with GSAP (Codepen link provided). I want it to trigger with a forEach function, because I have a couple of instances of this same effect on a page. So I set up a basic forEach function that will trigger the animation as it scrolls into view, but when I use this method to invoke the sliders() animation function, I get all sorts of unexpected behaviour. In my if/else statement when i just do a basic test line (i.e. item.style.background = "green";) it works, but when add put the sliders() function call in it all goes a bit haywire. Does anyone know what is happening? Or what the best solution would be? P.S if you want to see the intended behaviour of the animation, if you comment out the forEach section and re-comment in the slider() function call you'll see what the animation is meant to look like. P.P.S Any help would be hugely appreciated. function sliders () { var timerbar = document.querySelectorAll(".timerbar"); var tl1 = new TimelineMax({repeat: -1}); tl1 .from(timerbar, 2, {scaleX: 0, ease:Power0.easeNone}) .staggerTo(".js-stagger-1", .5, {y: -30, opacity: 0}, .2) .staggerTo(".js-stagger-2", .5, {y:0, opacity: 1}, .2) .to(timerbar, 0, {scaleX: 0}) .to(timerbar, 2, {scaleX: 1, ease:Power0.easeNone}) .staggerTo(".js-stagger-2", .5, {y: -30, opacity: 0}, .2) .to(".js-stagger-1", 0, {y:30, opacity: 0}) .staggerTo(".js-stagger-1", .5, {y:0, opacity: 1}, .2); } // sliders(); // FOREACH TRIGGER ON TEXT SLIDES var triggerBox = document.querySelectorAll('.one-col.js-scroll-trigger'); function scrollTrigger() { triggerBox.forEach(function(item){ var boxPosition = item.getBoundingClientRect().top; var boxPositionPercent = (boxPosition / window.innerHeight) * 100; if (boxPositionPercent <= 100) { // 100% equals bottom of viewport sliders(); } else { // somehow kill the function } }); } window.addEventListener("scroll", scrollTrigger);
-
Guys, Although I've worked with GS before, GSDevTools is new to me. I'm loving it but finding I get varying results in the playback. I have some code which I'll list below and it includes a draw function then a splitText function then a fade function which are on a masterTL. I hit play and all's well but if I hit play to watch the animation again the fade gets quicker and seems to move up the timescale and if I hit play again it gets quicker still and then disappears. I've tried including TL functions to reset vars but it doesn't make any difference. Obviously the code doesn't change. <CODE> /*Draw Function - makes .svg with class="badge" visible then draws it, then fades the container div #splash and all works fine*/ function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); var tl = new TimelineLite(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }); tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } /*Split Text function - variable received to function as console confirms, makes <p> visible then performs splitText on <p> and works fine*/ function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineLite(); console.log("done split ",textLine); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04); return tl; } /* Fade Function - variable received to function as console confirms, then tweens a simple repeating fade on same <p> as Split Text function and works fine first time*/ function hudFadeEffect (hudLine) { TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true}); console.log("fade effect",hudLine); return hudLine; } /*Timeline*/ var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(runText, ["#hudGenius"], 1) .call(hudFadeEffect, ["#hudGenius"], 2) What am I doing wrong? I know you'd probably appreciate a pen but mine's private - I can send the url to GS superfabheroes if you want via email. Buzz
-
Hello, Do you think if it would be useful to add onPause/onStop event callback? So the state of timeline could be obtained more convenient way? Or maybe I miss something? States: - never played - playing - paused/stopped/killed but not completed - paused/stopped/killed and completed
-
I test different solutions , but I have a question – I'd like to animate only element with class active. Currently the first element animates third element, why? I learn JavaScript, but still a lot of work ahead of me
-
Hello fellow tweeners! Hit a brick wall here even though I feel like I've done the hard part. I've been referring to documentation for hours trying to solve this. I'm trying to fire my page loading counter after it fades in, via the tween that does so. Everything is setup & neatly organised/labeled but I'm just butchering the last part lol. The three parts I'm using are marked with lots of asterisks & notes explaining what I'm trying to do. The load counter needs to be nested inside the "onComplete" callback which is already being fired by my tween (console log works)... just not able to get the countdown in. *sigh* Any help would be massively, massively appreciated. Loving the library & community equally! Cheers, Smallio Sorry for the newbie question <3
-
Hi team, I have a problem with my code that I can't solve. So what I have is a master timeline that have 3 nested timelines: getSpinTimeline(), getRotateTimeline(), getPinTimeline() var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); mtl.timeScale(2.3); After the animation has ended, I hit on a button I would like to reverse() the animation. It works fine if I do mtl.reverse(); But what I am trying to achieve here is to remove getPinTimeline() and reverse only getRotateTimeline() and getSpinTimeline(). I tried the following but failed: mtl.remove(getPinTimeline()).reverse() mtl.seek(getPinTimeline().totalDuration()).reverse() I have also tried creating a duplicate timeline but failed: var mtl2 = new TimelineMax(); mtl2.add(getSpinTimeline()) .add(getRotateTimeline()) mtl2.timeScale(2.3).reverse(); Any idea how I am able to fix this? Thanks, Venn. -
Hi, I would like to create a timeline "A" from which I do some animation and then play another timeline "B" and potentially a timeline "C". I know I can do that by doing A.add(B.play) but as I understand it it merely means B is started at the point in A where I include it. I would like to ultimately be able to fire a callback once A, B and C are all finished without having to worry about whether B plus the elapsed time in A before is start B is longer than the total duration of A. Is there a nice way to create this structure and add a callback once all the timelines end? Best regards, Miry
-
Hi there, i have a timelineMax with many animations added. when i click a button i want reset the timeline and add completly new animations to the timeline so i do: timeline.clear() timeline.to(myAnimation) timeline.restart() unfortunately some svgs are stuck in the middle of the former Animations, because the restart/clear doesnt wait till the end of those animation, but interrupts them. How can i wait till the current animation has finished and then restart/clear? Im not at the end of the timeline so timeline.progress() is not an option. Thank you
-
Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over nav button(.dropdownmenu-button) that triggers dropdown with animation in it.... but it only seems to trigger the first div and the rest dont trigger. Similar to this - https://www.open-wear.com/ //gsap animation of elements in dropdown navigation var toggle=0; var tldropdown = new TimelineMax({paused:true}); var items = $('#dd-heading'); var list = $('.dropdownmenu-button'); tldropdown.staggerTo(items, 1.5, {x:20,opacity:1,delay:.5}, .5) .addPause(null,function(){ if(toggle)tldropdown.play(); } ) .staggerTo(items, 1.5, {x:20,opacity:1}, .5) function over(){ tldropdown.restart(); toggle=0; } function out(){ tldropdown.play(); toggle=1; } list.hover(over, out);
-
Hello, First time posting here, but already learned a lot of great things on this forum. Thank you community! I am having a problem with playing timeline from a certain point (label). I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline. const master = new TimelineMax(); master.add( preload ) .add( audio_togle, '+=13' ) .add( particles ) .add( navigation_show ) .add( videoSize, 'particles+=2' ) .add(function () { videoPlay('intro') }) .add( parallax ) .add( scene_first_show, 'scene1show' ) .add( pause ) .add( scene_first_hide, 'scene1hide' ) .add( pause ) .add(function () { scene(text[0]) }, 'home' ) .add( pause ) .add(function () { scene(text[1]) }, 'about') .add(pause) .add(function () { scene(text[2]) }, 'contact') .add(pause) .add(function () { scene(text[3]) }, 'portfolio') .add(pause) .add(function () { videoPlay('outro')}) .add( scene_final, 'finalLogo') .add(pause) function pause() { master.pause(); masterIsPaused = master.paused(); console.log('Master is paused'); } And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. mainNavItem.on('click', function () { $self.addClass('is-active'); mainNav_hide(); var whatToShow = $self.data('show'); master.seek(whatToShow); }); But `master.seek(whatToShow);` doesn't work at all. How can I jump to certain label and play from there? Thank you, Mo
-
Hi, I ran into some odd behavior with TimelineMax recently. When setting 'display:none' in the timeline, and running it in reverse, everything works as expected - most of the time. Quite often though (it's completely random), the display property does not get set - or reset if you will - when reversing, leaving it at 'display:inherit' after the animation is done, as demonstrated in the fiddle. You need to open the debugger to see it (and click the button until it occurs). https://jsfiddle.net/rvq96mht/ Adding 'clearProps:display' at the start of the timeline is causing other issues, such as 'display:inherit' not being set when expanding. The behavior is consistent in both Chrome and Firefox. Any ideas?
-
Hi, Is it possible to have a negative delay on a timeline. var tl2 = new TimelineMax({delay:-10, repeat: -1}); tl2.fromTo(".cloud-container-2", 5,{top:200, scale:1, opacity:0}, {top:200, scale:1, opacity:1, ease:Power0.easeNone}) tl2.to(".cloud-container-2", 5, {top:300, scale:2, ease:Power0.easeNone}) tl2.to(".cloud-container-2", 5, {top:400, scale:3, ease:Power0.easeNone}) This does not work.
-
Basically, every time a tween is called in my timeline, I want to recheck the value to be tweened by. `generateValue` seems to be only called once. When I resize the window every time the tween is called it uses the value it first generated. Help would be very much appreciated! function generateValue() { var value; // if window is smaller than 520px if (Modernizr.mq('(max-width: 520px)')) { value = $window.width(); } else { value = 420; } return value; } TweenMax.to($myElement, .2, [x: generateValue});
-
Hi all, I'm very new to GSAP, so here is my question: let's say i've a page with different post or project elements, each one made by a container and all his childrena. I've a timeline that define the animation i want to use to "unfold" this kind of containers, but since each one have the same sub-elements with the same classes, everything happen at the same time. The staggerTo method would create a sequence just within the same element of each class in all the container at the same time. Instead, i would like that each of those container unfold indipendently, or actually with a minimal delay between they all, each one fallowing the same timeline. Is there a way to do that? Was my explication clear enough? Thank you all!
-
Hi! I'm new to this community. Can someone tell me if I can create independent timelines and fire them at will even if they will overlap? For example: var tl1 = new TimeLineMax (){}; tl1.[some animations]; [later in the document] var tl2 = new TimeLineMax (){}; tl2.[some other animations]; Problem is - when tl2 fires, tl1 stops. What I need: I need to operate timelines independently, fire them at any moment without interferences with each other. Haven't found anything useful in the docs. Thanks!
-
I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely? Here is my js right now: var $loader = $('#load'), tl; tl = new TimelineMax({repeat: -1}); tl.from($loader, 1, {x: '-=40%', transformOrigin:"0% 50%" , autoAlpha: 0, scaleX: .2, ease:Power2.linear}) .to($loader, 1, {x: '+=60%', ease:Power2.linear}) .to($loader, .8, {x: '+=10%',autoAlpha: 0, scaleX: .2, transformOrigin:"100% 50%" , ease:Power2.linear});
-
Hi, I just plugged GSDevTools to my js file, but GSdevtools not picking up my timeline IDs, and also it default to Global Timeline and continue to play till 90.00sec. why is that? function gotoNext($out, $in) { var tl = new TimelineMax({ id: "sliderOut" }), $slide_left = $out.find(".slider-left"), $slide_svg_path = $out.find(".svg-bg > .svg-bg-left"), $slide_name = $out.find(".slider-project-name"), $slide_desc = $out.find(".slider-description"), $slide_tech = $out.find(".slider-tech > ul li"), $slide_right = $out.find(".slider-right"), $slide_static_name = $out.find(".slider-static-title"), $slide_on = $out.find(".slider-no"), $slide_img = $out.find(".slider-img"); tl .set($in, { autoAlpha: 1, className: "+=active" }) .set($out, { className: "-=active" }); // other tweens } GSDevTools.create({ id:"#sliderOut" });
