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 everyone, First time poster. I see that a Codepen is highly recommended, I am just not sure how to create this react app in Codepen. I will have to look into how to do this next. So. I have been trying to find the solution on the forums to no avail. I can get my animation to play once, but it won't reverse, and it won't play again and I am not sure why. This is the first time using GSAP and timelineLite. What I want to happen is the firstname, lastname and whoButton will zoom off the page, displaying a card with some aboutMe text. Then there is an 'OK' button on that card, which
  2. Hello! I have a big slider with animations, and it gives a lot of load on the PC P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian) Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds? Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768? And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)
  3. Hello everyone, First time using this, so please excuse my terminology. I'm doing a THREE.js animation loop, where a bunch of textGeometries animate forming a box, sphere and cone. I'm using two timelines since I don't want the first transition(from initial state to forming a box) to repeat. So when restarting the second timeline on `onComplete`, it isn't doing a smooth transition. I'm unable to track down what's causing this, could anybody please help me figure out why the restart isn't smooth? Below is the logic, followed by a codepen demo: for (i = 0; i < MAX_PARTICLES; i+
  4. Hi, I created this animation and tried to import it to my website. https://codepen.io/Philastan/pen/VwLRMwx Surprisingly i only got the first part of my animation working and after some fiddling I got the same result in Codepen, while there are basically the same libraries loaded. https://codepen.io/Philastan/pen/eYNLZYX After reading in the documentary I ended up trying to use tl = gsap.timeline({ paused:true }); instead of the timelineLight - but still: Same issue. It seems like Gsap gets stuck at the Morphing Part. I am happy
  5. Hey there, I have a Timelinelite instance where I running both "single shot" and "repeating" animations, however, I'd like the "timeline.totalDuration()" to not include repeat. My goal from the below is to get a total duration of 1.5sec , that is duration without repeat. Is there a method I can use to get that? Thanks. const timeline = new Timelinelite({paused: true}); timeline //Animation A ( 1 second duration) .to('#box',{x: 0,duration: 1 }, 0) //Animation B ( 0.5 second duration) .fromTo('#box',{x: currentX - 2},{x:currentX + 2,duration: 0.5, repeat: -1}
  6. Hello Guys, I've been looking around the internet and this forum for some time and I could not find a fix whatsoever. I am currently working on my finals project and I've come across this white-space problem which seems to only occur on mobile devices. (In my case: iPhone 11) I included a codepen (https://codepen.io/benvi/pen/KKwbzON) on which you can see the problem yourself. On a PC or Laptop, there will be no whitespace on the right side, however if you inspect this codepen on your mobile device you will notice while the animation hasn't finished playing, you can scrol
  7. I'm trying to get proper control of these balloons, and I'm close, but not. quite. there yet. The green one is for reference, and demonstrates that gsap's default behavior is to use "left top" as the origin. The red one is the one whose attributes I'm tweaking, trying to accomplish this one, surprisingly-challenging goal: start horizontally centered, then animate till it's scaled 2x and centered on the crosshairs. Questions I have about the attached pen: Why doesn't the red balloon start already-centered? Why does the red balloon end up slightl
  8. I am trying to animat a div, but the console throw and error. "TimelineLite is not defined" and I can't seem to understand where the problem comes from. Here are snippets of my html and js code. I tried with TimelineMax as well, same result. ? Help will be highly appreciated!
  9. am experimenting with timeLine Exist a way to add a simple instance with callback but without target ? const actiontl = new TimelineLite(); actiontl.to(items, 0.2, {x:'+=140',y:'-=140', ease: Power4.easeOut },'#step1') .to(items.map(i => i.scale), 0.3, {x:0.8,y:0.8, ease: Elastic.easeOut.config(1, 0.3) },'#step1') .to(items, 0.1, {x:target.p.x ,y:target.p.y-(target.p.height/2), ease: Back.easeIn.config(1) } ) .to(null, 0, { onStart: () => { target.s.state.setAnimation(1, "hit1", false) } } ) //FIXME NO WORK ! .from(items.map(i =>
  10. The update to 2.1.x started throwing errors in several spots in my project so I rolled back until I could get a chance to debug what was different. I finally worked out what the problem is: you can no longer change a class on the HTML element as part of a timeline. This seems to be a change in CSSPlugin.js that pushes every call to the set() function in TimelineLite through the "_getMatrix" function. That function performs a trick when the element isn't visible by appending the element to the DOM. Unfortunately, if the target is the HTML element that causes a "DOMException: Failed
  11. Hi guys, my TimelineLite animation in React JS stops after switching to another window tab. Is there a solution to prevent that? I saw one older topic https://greensock.com/forums/topic/11831-solved-tweenlite-animation-stops-when-window-lost-focus/ , but as it was in question TweenLite and I am using TimelineLite this is not a solution to my problem. I haven't seen any similar property like TweenLite.ticker for TimelineLite. Can somebody help?
  12. 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?
  13. 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
  14. 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!
  15. 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.
  16. 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?
  17. 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
  18. Hi, I am having some trouble on my project. I made some animations using TimelineLite and it works great. The animation are all images and texts moving around and video playing on background. But recently I was asked to export this animations to mp4. I tried many ways on doing it, but no success. 1. I have followed this topic below. It works fine when the animation contains only static images. with a <video> playing on background I just cant do it. 2. I have tried to use headless browser to record my screen, but its too slow I just couldn't get screenshots o
  19. Hi all, I would like to replicate the App Store Featured App/Games animation. See this to see what it may look like: https://alfian.d.pr/B7ZbXP Basically, there will be 2 elements in which the styles would be the animated before modal is opened and a different styling after modal is opened. In the App Store case, its the image (increase width size) and the modal title (change x value position). In my Codepen, I would like to replicate such an animation but I have no clue to using the GSAP code to do this. I know I asked a similar question to which the answer
  20. 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
  21. 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.
  22. 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
  23. 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
  24. 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!
  25. 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
×