Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timelinelite'.

  • 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. Hi. first time to post here. I wondered how to start specific elements' animation at same time in Timelinelite with starggerFrom methods? Let's say I have 5 elements and I want to make 2nd and 3rd animation start at the same time. Is there any settings I can use in staggerFrom?
  2. I am working on some concentric circles that should rotate infinitely, until a user clicks on one of them, in which case it should stop the animated rotation and be draggable (rotation). Then, if a different circle is clicked, the new one should stop it's animation, but the previous one should start up again from the position where the user left it after dragging, but with it's original direction and speed. I have managed to get the pausing/unpausing behavior working correctly, except for the fact that if the user drags a band a lot (say, rotating it around fully 2 or 3 times in t
  3. Hi guys, I am pretty new to GreenSock but desperately trying to learn more and use it as my main animation toolset. So far I am absolutely loving it. I am kinda stuck on the TimeLineLite portion of Petr's course on ihatetomatoes. I am trying to add tweens to a timeline but as soon as i add the variable tl it stops working. Please check out my code and help me figure out where I am going wrong. I am sure it is super obvious to someone more experienced but I just can't seem to figure it out. thanks in advance, appreciated!
  4. Hi, I'm developing an website and I'm trying to separate a big animation into smaller timelines, but I'm getting a strange behavior when using tl.add(). I recreated it on Codepen in a simpler manner than in my website. On Codepen I have 3 boxes, each with it's own TimelineLite instance, and then I have the variable tl, and I added the first 2 timelines in it. What happens is: If I try to play the tl timeline, with the first two boxes, nothing happens. If I try to play the tl1 and/or tl2 timelines separately, is jumps around or start tweening near the end of the timeline.
  5. I have a timeline with couple of tweens in it. Some of those tweens get destroyed by TweenLite.killTweensOf(myNode) while the timeline is playing but after removing those tweens, the position of the next tweens don't change and the timeline act like nothing has been changed. I expect when I remove a tween from timeline, then any tween after that shifts and start earlier. Is it even possible to do what I want to do?
  6. is there anyway to set timeline duration regardless of each tween duration in timelinemax? i used this trick tl.set({}, {}, 15); but it only works when time line length is less than the new value
  7. i am using gsap basic animation like translations and show or hide but the animation sometime do not go smoothly i don't know if i can post my demo website link but if anyone want to see the web i can comment on this post chars = mySplitText.chars; tl.staggerFrom(chars,0.01, {opacity:0, ease: Expo.easeInOut}, 0.11, "+=0.1"); tl.to(skip,1,{display: 'block',ease: Expo.easeIn},2); tl.to(bodycontent,1,{display:'block'},9); tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9); tl.to(txt,.1,{display:'none',ease: Expo.easeIn},9) tl.to(showafter, 2, {y:-7000,rotation:45,scale:4,ease: E
  8. Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11
  9. 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 othe
  10. 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.
  11. 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(fot
  12. 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 strok
  13. 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!
  14. 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: "#hoc
  15. 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!
  16. 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 conten
  17. 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
  18. 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,
  19. 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
  20. 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(
  21. 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 spe
  22. 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 pseu
  23. 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
  24. 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
  25. 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 i
×