Search the Community
Showing results for tags 'timelinelite'.
-
I suspect that this topic has been approached in the past, but I want to bring my own 2 cents to the table (if you'll have my cents ::- D). Since we can add onComplete and other such callbacks upon construction, why can't we add it later directly in the instance (if we saved the reference to the instance of the TimeLine or Tween). For example, in my situation, I want to add an onComplete to a TimeLine, but only sometimes. It's clumsy to call the constructor in an if statement. I would prefer to call the constructor and append methods and only later add the onComplete event (or any other such events). Are you just saving space in the library? Because as far as I suspect, this would be a piece of cake to make. Could you perhaps advise how to implement this as an extension to your library? I'm thinking of extending the TimeLine class and add the properties myself. Size is not a concern for me (these days, for who is?). -
Hi when cloning any node on the page, the scrollTo plugin no longer works, is there a way around this? I've taken the default Codepen example and cloned an element to demonstrate the issue.
-
Hello, I want to execute a TimelineLite only one time. I use a plugin (fullPage) and when I move to a section of the page 'secondPage', I have a function for executing the TimelineLite( animaFotos() ). But I need the animation only works one time. I've tried with kill method but doesn´t work the animation. function animaFotos(){ //cambio css. para mostrar imágenes y comenzar TwenLite fotos.css('visibility', 'visible'); textoinfo.css('visibility', 'visible'); tl .from(foto1, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.3) .from(foto2, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.6) .from(foto3, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.9) .from(textoinfo, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},1.2); } $(document).ready(function() { $('#fullpage').fullpage({ css3:false, anchors: ['firstPage', 'secondPage','thirdPage', 'lastPage'], afterLoad: function(anchorLink, index){ var loadedSection = $(this); //using index if(index == 1){ animaLogo(); } //using anchorLink if(anchorLink == 'secondPage'){ $('#titulo').html('bio'); animaFotos(); secondLife2('.foto1','img/prueba1.jpg', 'img/1.jpg'); secondLife2('.foto2','img/prueba1.jpg', 'img/4.jpg'); secondLife2('.foto3','img/prueba1.jpg', 'img/3.jpg'); } if(anchorLink == 'thirdPage'){ $('#titulo').html('portfolio'); animaCards(); } if(anchorLink == 'lastPage'){ $('#titulo').html('contacta'); alert('contacto'); animaCards(); } } }); });
-
Hi, First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work! I'm trying to get the following animation to work however and am having some issues. This is the following animation. See screenshot. The animation should be as follows: The T appears The line from the T to the D animates the stroke with DrawSVG. The D appears The line from the D to the L animates the stroke with DrawSVG. The L appears The line from the L to the T animates the stroke with DrawSVG. This is the following code that I have: const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2}); tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail. Any help with this would be greatly appreciated. Thanks
-
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!
-
Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween. Here is the code I'm using currently to make this happen: // Hockey Player Slide var tween = TweenMax.staggerFromTo(".hockey-boy", 1, {left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#hockey-player", triggerHook: 0, duration: 2000, }) .setTween(tween) .setPin("#hockey-player") .addIndicators({ name: "Hockey Player", }) .addTo(controller); http://empowerplay.webflow.io/ I greatly appreciate anyone shedding some light on this for me! Take care!
-
Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!
-
Hi there, I am integrating GSAP with fullpageJS. for some slides, i am using the same timeline for the elements to fade in when a user gets on a new slide. This is how i set my animation var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn },0.2); for now the animation will run for all slides when the user gets to a slide. for example if the user gets on slide 1, the content fades in. but when I swipe to slide 2, the content is already in view because the animation was played for all slides. this is how all my slides (will) look like. <div id="slide2" class="slide"> <section class="content"> <h3 class="title">slide 2</h3> <p> content </p> </section> </div> I am using the callbacks provided by FullpageJS in combination with GSAP. I know $(this) refers to the specific element you want to target, but I can't seems to find a way to refer to $(this) in a timeline. Its working fine except the animation is triggered for all slides, which needs to be only for the loaded slide. see how i make use of the callback provided by fullpage with some gsap. afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var loadedSlide = $(this); var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn }, 0.2 ); if (index == 2 && slideIndex == 1) { tl2.play(); } if (index == 2 && slideIndex == 2) { tl2.play(); } } Can someone help me and put me on the right track please see my fiddle: https://jsfiddle.net/jqk753m7/5/
-
Hi Everyone, I'm trying to figure out how to use timelineLite with React properly. I attached a codepen that works but I have read is not best practice. The key thing I need is a parent component that will contain the timeline object as a state and then a series of child components that I iterate over. I read this blog post that claims that it is important to use the onComplete() call back when I am setting up my timeline entries. The callback gets triggered within the ChildItem when it appears or disappears. The problem with react is that data flows from the top on down, so I can't for the life of me figure out how I can get the callback up into the parent component so I can register it properly. Can anyone suggest the best way to handle this particular problem? Are there any other changes I should make to this codepen? I heard that I should be using refs instead of ReactDOM but I haven't been able to figure that out either. Thanks!
-
This is driving me mad, I have a simple Timeline, that works pretty well, except for some reason after I fade a MC out, I want to fade it back in later in animation/timeline and it just won't animate, instead it just appears/jumps back straight to 100%. I'm lost on why it wont or how to fix it. (or what even to search for in terms of reanimating the same thing later in the TL/ var til = new TimelineLite(); // til.to(this.WB01, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 1.5) .to(this.Logo, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2) .to(this.WB02, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2) .to(this.WB03, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2.8) .from(this.Logo_Final, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 6) .to(this.WB02, 1.00, {alpha:100, ease: Sine.easeInOut, overwrite: false}, 6) // - this is the line .from(this.CTA, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, "-=0.5") Any help or a push in the right direction would be much appreciated. -
Hi All, Im trying to get 2 tweens to animate at the same time when I mouse in over a link, and to reverse the animation when I mouse out. Each tween is working correctly in isolation, they're just not workingvery well together at the same time. The 2nd time you hover, the 2nd tween just jumps between its start and end points, there is no animation at all. I tried adding the position parameter of "0" to the second tweens but it didn't solve the problem Any help appreciated
-
Hey there, i am trying to reverse/change the color of a logo based on the section its in. I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't) I basically wont to use it on different subpages and the number of sections is variable. Thanks a lot, much appreciated const controllerMobile = new ScrollMagic.Controller(); const innerStart = new TimelineLite(); const innerEnd = new TimelineLite(); const outerStart = new TimelineLite(); const outerEnd = new TimelineLite(); innerStart.to('.js-logo__inner', 0.1, { fill: 'pink' }); innerEnd.to('.js-logo__inner', 0.1, { fill: 'orange' }); outerStart.to('.js-logo__outer', 0.1, { fill: 'orange' }); outerEnd.to('.js-logo__outer', 0.1, { fill: 'pink' }); const changeLogoStartTrigger = document.querySelectorAll('.js-change-logo--start'); const changeLogoEndTrigger = document.querySelectorAll('.js-change-logo--end'); function changeLogoStart() { changeLogoStartTrigger.forEach((triggerStart) => { const sceneChangeLogoStart = new ScrollMagic.Scene({ triggerElement: triggerStart, reverse: true, triggerHook: 0.065, offset: 0, }) .setTween(innerStart) .setTween(outerStart) .addIndicators() .addTo(controllerMobile); }); }; function changeLogoEnd() { changeLogoEndTrigger.forEach((triggerEnd) => { const sceneChangeLogoEnd = new ScrollMagic.Scene({ triggerElement: triggerEnd, reverse: true, triggerHook: 0.015, offset: 0, }) .setTween(innerEnd) .setTween(outerEnd) .addIndicators() .addTo(controllerMobile); }); }; changeLogoStart(); changeLogoEnd();
-
Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
-
Hey Guys! I've recently discovered your awesome products and have been enjoying playing around with the examples. However, I've run into some trouble trying to implement it into my project haha. Yet confident this won't be a biggie for you guys. So , if it's not too much of a bother please take a look at the codepen attached to see what I mean. https://codepen.io/Raulito/pen/jmwXxp *Specifically, I keep getting the error 'cannot tween a null target' in the console , which stops all my other animations from running , when trying to use the CSSRulePlugin to target the :before pseudo element. *I've noticed that this error occurs and can be seen in the console both on codepen AND when doing local development without a server, but for some reason works when I'm developing it locally using XAMP. * Cheers, Raul.
-
Hi i have multiple div like #animate123 when the cubic beizer ends the the div will disappear (smoothly reduce the width and height or scale till the bezier track ends) var tween = TweenMax.to("#animate123", 5, { bezier:{ type:"cubic", values: [{"x":178.853394,"y":292.738353},{"x":178.853394,"y":292.738353},{"x":461.554575,"y":189.214815},{"x":640,"y":255.010604}], autoRotate:["x","y","rotation", 0, true] }, ease:Power1.easeInOut},{className: "+=fish"}); please help me
-
Please Remove the Topic. Issue relays on latest TimeLineLite (1.19.1). Issue is not reproducable on version 1.17 or older. So we are back to version 1.17 Thank you, ThemePunch
-
Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen
-
Hi, Would 'onComplete'/'onStart' wait to fire upon 'screen refresh'? If not, how can I achieve this? Thanks, Andy. edit: So I explored this via code. Find below results (asking for block to appear for 100ms). Results imply 'onComplete'/'onStart' do fire upon screen refresh/new frame. Must say, the results make me nervous. Fingers crossed there is a bug in my code. Here is a codeOpen exploration. stat_descriptor av stdev min max start_dur 16.420999999999886 2.655742111278148 7.490000000000009 39.90499999999997 end_dur 93.43405000000013 8.488287613743891 63.65499999999997 101.95000000000073 start_dur, or 'time the code was started' makes sense. It's one refresh, after the item was asked to be placed on screen. edit2: approx 40 ms between max and min durations. Thats approx 2 refreshes. What you'd expect?
-
This is so simple that I have to be missing something easy. I'm setting the paragraph element to an opacity of 0; Then I'm splitting the text into words. I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. http://codepen.io/trshelto/pen/YZQPwd/ TweenMax.set("p", {opacity: 0}); var text = new SplitText("p", {type: "words"}), words = text.words; var tl = new TimelineLite({delay: 1}); tl.staggerTo(words, 1, {opacity: 1}, 0.1);
-
Lets say I have a complex TimelineLite instance, which is maybe tweening some DOM elements' CSS properties but also is tweening some pure JS properties which are used in drawing on canvas. Any time one of those canvas related properties updates, I want to call a function that redraws the canvas, but if some of those tweens are overlapping, I want to be sure that I am not redrawing the canvas more than once per tick. Is there a baked in way to achieve this? Or is my best bet to have the drawing method be a pre-throttled method? Cons to that would be that the throttling is then set at a hard ms time, rather than at the current requestAnimationFrame rate.
-
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 }
-
Hey there, I'm just getting started with GSAP and so far loving it! But there's one thing I couldn't get figure yet and I can't find any example online: tween repetition inside a timeline without stuck it I mean: var timelineChain1 = new TimelineMax(); timelineChain1.to("#timeline-1 .el", .2, {autoAlpha:1}) /*STEP 1*/ .to("#timeline-1 .el", .2, {scale:.8, repeat:-1, yoyo:true}) /*STEP 2*/ .staggerTo("#timeline-1 .el", .2, {x:-20}, .2 ); /*STEP 3*/ What happens: step 1 runs ok, then the timeline get stuck in the repeatition of step 2, so step 3 never happens. What I want: the infinity repetition to continue as the timeline goes on. Is it possible? Thanks and keep going!
-
Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); }); -
Dear all, how accurate is TimeLineLite? People advise to stick with setTimeOut() for accurate timing of visual elements on screen (http://link.springer.com/article/10.3758/s13428-016-0783-4, the actual pdf) and not to use external packages (which presumably would add bulk/unknown-inaccuracies). I see that you can measure timing in TimeLineLite in terms of ticks. This seems the ultimate way of controlling for timing. But are onscreen happenings guaranteed to stick to ticks? I've been using Greensock for years and would be so happy to use it again cheers, Andy. Edit: v relevant prev post here. Advises following setting to avoid inaccuracies: TweenLite.lagSmoothing(0) -
Hello Fellow Greensockers, Here is a question for you How come that, when trying to create an instance of TimelineLite after that the javascript onload event fired, the following import gives me this error in Chrome:Uncaught ReferenceError: TimelineLite is not defined(…) <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.19.0_cfbff7d208ccfdbe176b9855af1eb1fa_min.js"> </script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.19.0_422f021fad4c20f20cf3640a06ac39e9_min.js"></script> Whereas this import does not <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.19.0_cfbff7d208ccfdbe176b9855af1eb1fa_min.js"> </script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> Did my brain just die overnight ? Sorry, it is such a silly question. But as I recall I just need to import TweenLite to instantiate TimelineLite Thanks in advance, "S"
