Jump to content

Search the Community

Showing results for tags 'timelinemax'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 462 results

  1. Hello, Project Background: I am working on a SVG Map and using the paths to animate the path going from one point to another, ie a to b, b to c, c to a etc. The Paths are drawn successfully but I am unable to find a solution to stop the current animation and clear out any related properties, before the next path starts to draw. Code Pen Demo: I have two SVG paths that get drawn. Both paths have their buttons for animation to start, currently when I click on Path 1 button it starts to draw and then when I click on Path 2 and starts to draw as well and both running as the same time. When Path 1 is clicked and the path is being drawn and I click on Path 2 button I would like the Path 1 animation to stop and the Path 2 starts. When I say completely stop, I mean completely I mean its set back to originally start before the button was clicked. I put a Kill() button when stops the animation but leaves the path line drawn on the screen, and if I start the second path the first one restarts I might not be placing it correctly maybe? When searching the forum, I have came across clear(), restart() but that did not work or I might not applied them correctly, to keep the code demo minimum I did not include those into demo. Any help or suggestions are very much appreciated. Thanks!
  2. With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom? I tried doing something like this: var mydiv = new TimelineMax() .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1})) .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2})); However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay? Or, is there another way of doing chained animations?
  3. https://codesandbox.io/s/sad-maxwell-2b7vv?fontsize=14 Edit: For clarification, this needs to use React hooks. I have it transforming from = to x and vice versa, however, I had to hard code the reverse animation because I couldn't seem to get it to work by using the reverse or reveresed methods like shown below. if (isMenuOpen) timeline.play() else (timeline.reversed(true).play()
  4. Hi I heave animated banners template list create using timelinelite. I want to select some banners as preview and edit text then add to timelinelite after that play all selected banners how can i do that. please help Thank you
  5. To give a quick summary, I want to be able to set the progress/time at which a bezier path will hit each anchor point while keeping both the path and speed/progress smooth, i.e.: var bezier_path = [ {x:0, y:0, progress:0}, {x:0, y:80, progress:0.1}, {x:80, y:80, progress:0.5}, {x:80, y:0, progress:0.6}, {x:0, y:0, progress:1} ]; Essentially what I'm trying to do is the same as @danehansenfrom 2013 if it gives you any inspiration: As you can see in the CodePen, the main method I've tried is correlating the x, y, and progress properties of a bezier tween. The x and y properties tween the moving element and the progress property tweens the parent timeline. Unfortunately it appears that including x and y values in the timeline tween breaks the tween. Hence, I've played with BezierPlugin.bezierThrough to calculate the correlated bezier and then seperate the object properties out for the element and timeline tweens. Unfortunately, TimelineMax.to() with bezier:{} doesn't accept this form of input. I've thought about using CustomEases but unless I know at at what time/progress a bezier anchor point will be reached this is not possible.
  6. Hi all, I have a page with clickable divs built with GSAP in vue.js. Clicking a div triggers a timelineMax animation that moves all three divs, changes their opacity, etc. When clicked, the “BACK” button applies the reverse() method, returning the divs to their original positions and styling. After reversing the animation, I am using the clearProps method to remove any remaining inline styling. As I am new to GSAP, I imagine there is a more elegant way of doing all of this but, it works. The issue arises when the user goes through this process again. When the divs are reset and user clicks one of them, the initial animation works but the reverse animation is very wonky. It seems to jump immediately to the beginning of the timeline, while simultaneously trying to reverse. It’s difficult to figure out exactly what’s happening because the debugger won’t step through the reversing timeline. Any advice would be appreciated. Thanks.
  7. Hi there, I'm trying to make an animation to repeat infinitely with a TimelineMax instance that includes a pause. var tl = new TimelineMax({ repeat: -1 }) .to(repeatWithPause, 0.5, { rotation: 180 }) .to(repeatWithPause, 0.5, { rotation: 0 }) .addPause(1.0); You can see in the codepen what I've tried so far. It seems I'm able to repeat several times the first animation. But as soon as I add a pause in the timeline, only the first iteration is played. The same applies for repeat > 1 and when the addPause() isn't at the end of the timeline. I might be doing something wrong. Any help appreciated.
  8. so I've seemingly never been able to get TimelineMax/TimelineLite to work. I've always gotten around this by using TweenMax tween's onComplete property to invoke the next tween, but, with the current animation I'm working on, it's necessary to have some of the functionality TimelineMax provides in my animation. What I am trying to is animate the clouds in this scene to move to and from each side of the screen. I am trying to do this with a repeating timeline for each cloud. The JS relevant to this issue can be found in this "passiveCloudAnimation" IIFE function. (function passiveCloudAnimation(){ let numOfClouds = 3; let cloudOne = new TimelineMax(); cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} ) })(); and so you needn't go searching around too much here are all the relevant css selectors and rules. .cloud { background: #fff; background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #fff), color-stop(100%, #f1f1f1) ); background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: linear-gradient(top, #fff 5%, #f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff", endColorstr="#f1f1f1", GradientType=0 ); -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; /*change box shadow - need to make it thicker*/ top: 40%; height: 54%; position: relative; width: 100%; } .cloud:after, .cloud:before { background: #fff; content: ""; position: absolute; z-index: -1; } .cloud:after { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; /* for left bumpe */ height: 110%; width: 40%; left: 14%; top: -46%; } .cloud, .cloud:before { -webkit-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5); box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5); } .cloud:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; /*for right bump*/ width: 48%; height: 150%; right: 11%; top: -75%; } .Cloud-Container { display: block; position: absolute; /*positioning*/ /*keep this ratio*/ height: 5vw; width: 7vw; } #Cloud-1 { top: 12%; /* animation-duration: 18s; */ z-index: 17; } #Cloud-2 { top: 22%; /* animation-duration: 19s; */ z-index: 17; } #Cloud-3 { top: 16%; /* animation-duration: 16s; */ z-index: 17; } The html is pretty self-explanatory. I feel like I'm following the docs exactly as it says, though as I put before I really have never been able to use GSAP Timelines. so I hope you guys can let me know what I've been messing up on all this time. thanks!
  9. Hi, I'm having a issue with TimelineMax. I've created a timeline that opens and closes the drawer in my navigation. It works, but eventually if the first time I move the mouse above the navigation elements (that triggers the animation), one of the timelines doesn't work anymore. I'm executing the timeline on mouseenter triggered by the main navigation items. Then I'm playing the timeline reversed when it's triggered a mouseleave by the container of the entire navigation. You can see the working example in the following video (password: codepen). The problem happens when I move quickly the mouse over the navigation items. I managed to film it in this video (password: codepen) And here the video that shows the error (password: codepen)
  10. I was making an animation using GSAP and SVG. I am new to GSAP so i don't know that if there is another way to do this animation with GSAP. If there is any better way to do this please suggest me. I would be thankful for good suggestions. Edited : it has issue when user scroll very quickly many parts of bulb doesn't appear properly and also some issues when user scroll upside. (Give suggestion to fix it)
  11. Hi, Is it possible using staggerTo to change the stagger value for each iteration so that it increases/decreases. So for example the stagger value would decrease .1 for each element Something like: .staggerTo('element', 1, {autoAlpha: 1}, x -= .1 ); Many thanks,
  12. I'm new to GS, so apologies for any poorly described things...I'm facing two issues. I'm trying to have circles move according to specific data I have for each circle, and I first tried to move an svg along a path like in this codepen by Sarah Drasner https://codepen.io/sdras/pen/aOZOwj, but there are instances where the circles should appear to stop momentarily but even when the data roughly repeats itself multiple times (they'll be different by 1-2), it doesn't seem to have any effect. (I'm not sure if it's visible from my codepen, but even when I tried manipulating the path points in Drasner's codepen, I wasnt able to create a pause). Consider that each data point represents an evenly spaced moment in time (like frames of a video), and I want the circle to hover for the equivalent amount of time that the data represents out of the total. eg one frame is 40 ms apart, so 10 frames of repeated data should mean that the circle is stationary/"moving to the same place" for 400 ms. I gave up on this method to try and tried the method in this example where I specify the duration/location of the movement for each data point, but cannot get it to work move at all. I'm not sure if it's because the sample rate is too fast, but I can't find anything about max/min durations for the .to. In both scenarios, I get this error Uncaught TypeError: Cannot assign to read only property 'cy' of object '#<SVGCircleElement>', but using the bezier method still works, so I just ignored it, but with the new method, it doesn't work and I haven't found anything anywhere about what this error means because I'm selecting the circle... In my codepen, I have a button for each method where you can see the error in the browser console but not the codepen console. https://codepen.io/azhao/full/bJVJxZ
  13. Whenever you spam click the toggle button the translate animation seems to be getting stuck.
  14. Hi there, this is my very first Question and I am a noob according GSAP, Webpack and this forum. I hope that this is the right way and place to ask a question and I provide all necessary information. What I am trying to achive is learning to work with wonderful GSAP (TweenMax and TimelineMax) and Webpack4. Everything is working fantastic with "-- mode development". I imported GSAP this way in my nav.js file. import TweenMax from "gsap/TweenMax"; When I switch to -- mode production in my build process, the animation runs, but instead of an "X" it ended like shown in the uploaded image. Any hint in which direction I could go further would be most welcome. Sorry for my English and many thanks in advance.
  15. **See Codepen URL** I'm trying to create a simple sequence that fades out "Test" after 4 seconds, and then fade out "Rest" after 2 seconds. "Best" will remain. When I append outside of the "if" statement, the sequence works—but inside of the statement—it does not register. I am able to detect as existing all of the elements (div, array, timeline object, etc) in the statement with the console log. It appears though that appending a sequence from an embedded "if" statement will not work. It has to be done on the root level with the Timeline object. Is this correct? Or is there a way to make this work with my current setup? (I've added notations to the code.) Thanks!
  16. Hello Community - my second post as I'm very stuck trying to integrate a range-slider in React that will be friends with the progress() method to move through the timeline! I can pass around the value I need to my slider, but getting undefined errors when I try to pass this over to this.tl.progress(this.state.value) etc? I've read through several posts, but none look very current...in fact most are going back 2-3 years and the react-way has changed! Looking through the 'getting started with react post from Rodrigo' there are some useful hints, but it seems overly complex, compared to how easy it was to plugin the play, pause, reverse and restart methods into a button with an onClick event handler. Do we really need a separate state management file to pass down the state as props to a child component just to get the slider to move through the timeline without breaking? I also got some very good support already (This gives you more of an idea what I am working on...sorry for the lack of a reduced codepen example as this is a large full-stack application! coming soon I promise!) Here's some code of how I got the play, pause, reverse, and restart methods working...these plugged right in! (FYI ButtonGroup and Button components are from React-Bootstrap): <Row> <Col md={12}> <ButtonGroup className="animationControls"> <Button bsStyle="primary" onClick={() => this.tl.play()}> <Glyphicon glyph="play" /> {"Play"} </Button> <Button bsStyle="primary" onClick={() => this.tl.pause()}> <Glyphicon glyph="pause" /> {"Pause"} </Button> <Button bsStyle="primary" onClick={() => this.tl.reverse()}> <Glyphicon glyph="backward" /> {" Reverse"} </Button> <Button bsStyle="primary" onClick={() => this.tl.restart()}> <Glyphicon glyph="step-backward" /> {"Restart"} </Button> </ButtonGroup> </Col> </Row> Until bootstrap-4 is up and running with react, you do not have range slider in your form components, so I had to look elsewhere. After trying a few different versions, the npm package rc-slider seems to be the most lightweight (little to no boilerplate required!) create your styles for the slider before your class function: const railStyle = { position: "relative", width: "90%", margin: "0% 0% 0% 3%", height: 10, borderRadius: 7, cursor: "pointer", backgroundColor: "#afafaf" }; const handleStyle = { height: 15, width: 15, backgroundColor: "white", borderTopLeftRadius: 10, borderTopRightRadius: 10, border: "3px solid #E5F1FC", top: -2, position: "absolute" }; AND be sure to set your starting value in the constructor....probably 0 since that would be the start of your timeline.... constructor(props) { super(props); this.tl = new TimelineMax(); this.state = { center: [46.8, 8.3], zoom: 1, value: 0 }; this.handleZoomIn = this.handleZoomIn.bind(this); this.handleZoomOut = this.handleZoomOut.bind(this); this.handleReset = this.handleReset.bind(this); this.handleSliderChange = this.handleSliderChange.bind(this); } Next, I have two functions...please note that onSliderChange and onAfterChange are pre-built methods for the react rc-slider component. these successfuly track and log the value as you drag along the timeline, but kill the animation! onSliderChange = value => { this.setState({ value }); console.log("Value is: ", value); }; onAfterChange = value => { console.log(value); this.tl.progress(value / 100); }; .....And lastly, the slider component itself, inside render() <Slider className="slider" style={railStyle} handleStyle={handleStyle} min={0} max={bookingData.length} value={this.state.value} onChange={this.onSliderChange} //onInput={this.handleSliderChange} onAfterChange={this.onAfterChange} /> I know this may be hard to digest without a working example. I'll try to make a reduced case, but here's the issue...inside the Slider component, if you drag the slider around, it will successfully log the value I need. Where can I pass the value to this.tl.progress(this.state.value / 100) etc to get the timeline to respond? I've tried a dozen different ways, and I either get that value is undefined, or when I try to pass this in to the onSliderChange I get my fav error about expected a function, but instead saw an expression, no unused expressions. dragging the slider around kills the timeline, or depending where I do it, will make the animated elements disappear from the screen. Grrrrr! React is very powerful, but the need to constantly update the state of components during their lifecycle make these kinds of things very frustrating! If anyone has solved this or can send a link to an example of how to do this it would be greatly appreciated! If I figure it out on my own I will update the post - I know I'm close! Thanks community!
  17. Hi! Please see my codepen example. Why the timeline doesn't execute "to" command after function call? (the commented out variation of adding works, but is it correct?) I'm new to Js & GSAP so there may be issues with my code as I couldn't find similar issues on the forum. Thanks in advance!
  18. I have one query on timelinemax .to(). I have a bunch of images with class name .img-container. But one of the class has a class name active. I want to exclude that active class and animate other classes. Just like jquery .not('.classnAme'); Thanks in advance.
  19. Hello, I am pretty new to GSAP and so I may be doing something wrong, but I am having a performance issue with multiple back and forths animating three.js objects and then reversing them. As you can see on my project (linked below) when you click the three.js objects and then click the back button all the animations work fine. But the more you click them, the slower they start to become and the longer the reverse animation takes on the objects and on the text. Now I am not sure if I set it up wrong and its just an issue with my code, or whether its a performance issue. Can someone please see my GSAP code below and see if they can pin point what might be happening? Here is a link to my project: http://jacobtruax.info/ Code for the Tweening: const tl = new TimelineLite() const tlFNUP = new TimelineLite() const tlOld = new TimelineLite() const tlAlex = new TimelineLite() const tlCam = new TimelineLite() TweenMax.set(backTag,{autoAlpha:0}); TweenMax.set(footerTag, {autoAlpha:0}); TweenMax.set(moreTag, {autoAlpha:0}); function onDocumentMouseDown(event) { const intersections = raycaster.intersectObjects(objects) if (intersections.length > 0){ if(projectHov){ tl.play(); tl.add( TweenMax.to(footerTag, .5, {delay: 1, autoAlpha: 1,})); tl.to(backTag, 1, { delay: 1.25, autoAlpha:1, }, 0); tl.to(moreTag, 1, { delay: 1.35, autoAlpha: 1, }, 0); } if (intersections[0].object == old ) { if(projectHov){ tlOld.play(); projectHov = false tlOld.add(TweenMax.to(old, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut})); tlOld.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlOld.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlOld.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlOld.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); groupRotate = false } } if (intersections[0].object == fnup) { if(projectHov){ tlFNUP.play(); projectHov = false tlFNUP.add(TweenMax.to(fnup, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0 }, ease:Power2.easeInOut})); tlFNUP.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlFNUP.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlFNUP.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); groupRotate = false tlFNUP.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); } } if (intersections[0].object == cam) { if(projectHov){ tlCam.play(); projectHov = false tlCam.add(TweenMax.to(cam, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut})); tlCam.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlCam.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlCam.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); oldRotate = false groupRotate = false tlCam.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); } } if (intersections[0].object == alex) { if(projectHov){ tlAlex.play(); projectHov = false tlAlex.add(TweenMax.to(alex, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut})); tlAlex.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlAlex.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlAlex.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); oldRotate = false groupRotate = false tlAlex.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); } } } backTag.addEventListener("click", function() { projectHov = true groupRotate = true tlOld.reverse(); tlAlex.reverse(); tlCam.reverse(); tlFNUP.reverse(); tl.reverse(); })
  20. How do I execute a function after an animation has completed? I've got a simple animation: I grab an element, and then I animate it. Lets say my animation function is called changeState(). I want to do this sequence: 1. changeState() 2. selectNextElement() 3. changeState() selectNextElement() should only run once changeState() has completed it's animation sequence. Here's my stub for changeState: // get current block and animate it function changeState() { var currentBlock = $(".current") ; // colortween the current block var tl = new TimelineMax() ; tl.to( currentBlock, 1, { backgroundColor:"rgb(205,151,20)" } ) .to( currentBlock, 1, { backgroundColor:"rgb(152, 129, 74)" } ) ; }
  21. Hi, I've created a TimelineMax instance with a series of child TweenMax animations. I need to play the timeline backward and forward to transition between two states. This works great. When executing a reverse() only, I want some of the child animations to have lower position values, to speed up the animation as a whole. I keep references to the ones I want to target, and then use remove() to strip them from the timeline, before then re-adding them for the reverse(), with revised values. I've scoured the forum for an answer and have read much about how changing child tweens does not affect the overall duration of a timeline (which, when you alter / remove child tweens somewhere in the middle, makes sense) but in this case, the tweens I want to remove are the last ones in the timeline. Before I re-add them, is there a way to force the timeline to recalculate its duration, so that when they are re-added, they are appended after the last child. As it stands now, there is 'dead space' on the timeline where the tweens were, and so, when re-adding them, there is a long pause before they are played. The pause gets longer with each play() and reverse() (and remove() and add() as the total duration grows and grows.
  22. Playing around ive manage almost get the desired effect im going for. simply: when one menu is opened, the other closes, vice versa. i'm not sure this is the best way of doing things (if you'll be so kind to look at the code in the codepen ive tried to comment to make it easier) the problems: when clicking quickly back and forth between the two buttons everything gets glitchy/janky. i'm very new to this library any pointers in the right direction are appreciated.
  23. Hello, I am wondering if there is a nice and simple way to set all tweens duration of a timeline to 0 so it does not animate anything but instead applies the props instantly and other timelines. Essentially go to the end without animation anything. I created a codepen which uses seek to do this sort of thing, would this be the right approach or is there something more elegant?
  24. 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 was to use SPA (Single-Page Application), but for this case I think its possible to animate with modals. I am using this plugin for the full screen modal pop-up. Any ideas? Thanks, Alfian
  25. So I have a Timeline that has a series of staggerFrom. Each staggerFrom has an onComplete event that fires properly. However, I want my parent Timeline to yoyo: true, and repeat once (repeat:1, repeatDelay:1) so it reverses back. If I add those parameters, the onComplete event from each staggerFrom is not firing on reverse. Is there anything I am missing? TIA! Please note that I need to get some properties of the element (like the width and left position) after the each stagger animation. And I have multiple staggerFrom and tweens within my parent timeline.