Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.

  • 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 there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/
  2. Good morning, or good afternoon, or good evening… Hello guys! I'm working on a cog rotation animation for the (under development) store of my website. You can see it on the top right corner of the attached image. If I was not so perfectionist, I would have been done with it since two days… Sadly (for me), I too often —love— to fine tune things… so I would like my rotation animation to be as precise as I expect. I've made a Codepen which so far (at about 90%) shows exactly the kind of animation I would like. However, I'm quite a newbie to GSAP and I've the feeling my actual code could be way overthought. I made a bulle list to try to explain you the animation process and would much appreciate if you could tell me is there is a way to simplify / rethink it. I also miss the TODO point. Thanks in advance for your time, Cheers, Édouard.
  3. Hi there! I have this lovely animation working on every browser, except Safari, and I have no idea why. Am running the latest Timeline Max, jquery, etc. and it just will not cooperate. Am guessing somewhere in the HTML, inconsistent tags? Any help appreciated! <html> <body> <svg id="path_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1919px" height="498px" viewBox="0 0 1140.059 296" enable-background="new 0 0 1140.059 296" xml:space="preserve"> <path fill="none" stroke="#050101" id="flypath" stroke-miterlimit="10" d="M0,13c0,0,84-16,154,21s145,108,173,125s142,80,316,46 s277-19.173,355,9.913S1140.059,291,1140.059,291" /> </svg> <h1>THIS IS THE HEADING</h1> <img src="https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png" id="paperplane" width="150" /> </body> </html> $(function() { //cache the repeated variables var tl = new TimelineMax({repeat:-1}), plane = $("#paperplane"); var bezierData = MorphSVGPlugin.pathDataToBezier("#flypath"); var bezierDataFiltered = []; var path_width = $("#flypath").outerWidth(); var path_height = $("#flypath").outerHeight(); var path_svg_width = document.getElementById('path_svg').getBBox().width var path_svg_height = document.getElementById('path_svg').getBBox().height; $("#path_svg").hide(); var width_enlargement_factor = path_width/path_svg_width; var height_enlargement_factor = path_height/path_svg_height; console.log ("path_svg_width: ", path_svg_width, "path_width: ", path_width, "enlargement_factor: ", width_enlargement_factor); $.each( bezierData, function( key, value ) { value.x = value.x*width_enlargement_factor; value.y = value.y*height_enlargement_factor; bezierDataFiltered[key] = value; //console.log (value.x); }); function PlaneFly(autoRotate) { // bring playhead back to beginning and clear all tweens tl.progress(0).clear() // set the initial rotation to be close to the direction he's headed in .set(plane, { rotation: 0 }); //console.log (bezierData); //tween added to timeline with the specified bezier paths tl.to(plane, 3.8, { bezier: { type: "cubic", values: bezierDataFiltered, autoRotate: autoRotate } //ease for slip-n-slide-like animation wheeee //ease: Circ.easeInOut }); } setTimeout(function(){ PlaneFly(true); }, 5000); }); h1 { font-size: 250px; margin-top: 200px; text-align: center; } svg { /*display: none;*/ #flypath { } } #paperplane { position: absolute; top: 0px; left: 0px; }
  4. Hello, I have a timeline which makes the first div disappear and, on complete, it plays the timeline on reverse on the second object, so the second appears. In order to prepare the second and third object to play reverse I set them up with a TweenMax.set(). The issue is that once TweenMax.set() runs it kills all timeline actions, i.e. if I play the timeline on those elements it works but it doesn't have any effect on the object. To see what I mean check the codepen and comment the TweenMax.set() on line 32-33 in the javascript panel. PS: the real timeline is very complicated that's why I'd like to play reverse rather then creating another timeline with the opposite actions Thanks in advance
  5. Hi All, I'm new to GSAP. This is just a syntax question, I think: I have two images that need to be scaled up and positioned on the screen simeltaneously (using a timeline)...as if they were attached or parented. My attempts to do this result in one of the images moving at a slightly different rate which is not what I need. Below doesn't work as written ...but should give you an idea what I need to do: var tl = new TimelineMax({paused:true, reversed:true}); TweenLite.defaultEase = Elastic.easeInOut; tl.to(stage.ImageA (and ImageB), 1.3, {scaleX:3,scaleY:3, x: '+=263', y: '-=50'}); //These images need to scale up and move exactly in tandem as if attached. Any help appreciated!
  6. Hi all! This is more of a general question, but I'll explain my use-case. I have a component that has a timeline attached to it. This component is visible to start, but the timeline itself visually removes it from the page (a dismissible alert). In a particular case, I need to utilize both the reverse, then the forward action immediately. So, I am looking for a way to start the timeline at the end, reverse it, then play it. I've looked into both `time()` and `progress()` but when I run those, they seem to be accelerating "to" that point, instead of just plain setting the time, like `TweenMax.set()` would. Perhaps I've been approaching this wrong, but if anyone has an idea how to set that timeline to be at the end by default, I'd really appreciate it. Thanks!
  7. Hi, I want to play a Portion of my timeline - by seconds, progress or frames (whatever). For example: 1) Timeline is 10 secs 2) I want to play from 5 sec to 7 sec. 3) Add pause I think will not serve very well, as those portions change dynamically :/ Can't figure out from documentation, how to do this.
  8. 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 }
  9. Hi guys. I'm only about a week into GSAP and I've become stuck on trying to reverse the timeline on complete, then repeat infinitely. I can only mange to do one or the other, not both. I reeaaaallly tried to fix it myself using answers from other forum posts, but the solutions offered there just don't work in my pen. I would really appreciate it if someone could fork my pen and tell me what i'm doing wrong. Thanks in advance!
  10. Hello all, This is my first post in this forum. I have recently started using Greensock in my projects and it's the best javascript plugin out there on internet. So thank you so much for making this and helping people like me. Here is the codepen url: http://codepen.io/cooldhavs/pen/GrBraM This example uses Scrollmagic and Tweenmax timeline. My question is, when I resize the window below 990px, animation should stop immediately and it should show fixed layout below 990px. So when I resize window below 990px, all the boxes should stay touched at the bottom left corner and won't do any animation. But when browser window is below 990px and i am in the middle of the page and I resize the window to more than 990px, animation should start from the right point. I am not sure if this is good enough to explain the problem. So let me know if you require more information on the issue. I have used this kind of animation in two different projects and I am not able to find any answer to this. So please help. Thanks, Dhaval
  11. Hi, I made this tool called ScrubGSAPTimeline a while back that enables you to scrub through a timeline using your mouse. Not sure why I never posted it here. Or maybe I did - my memory is terrible. Anyway you can move your mouse out of the window to play the timeline animation and it plays from where your mouse was inside the window - so if your mouse was 45% along on the X axis of your window when it left, your animation will play from 45% of the way through the timeline's duration. You can also double click to pause scrubbing. This is useful if you want to right click and inspect an element in dev tools. You'll need to set the position of your main DIV/SVG container to absolute (I think!) otherwise you won't see the time display. I use this on every single animation project I make now so I hope you find it as useful as I do. GitHub https://github.com/chrisgannon/ScrubGSAPTimeline CodePen demo: http://codepen.io/chrisgannon/pen/zGmdBN Cheers, Chris
  12. Hello, I'm having two issues right now, which I cannot figure out. Issue #1 I have an animation in my CodePen using the first button, and when it finishes it's animation cycle it reverts the cssText back to it's original position. This is for a "preview" animation set up in my software. This will essentially revert back to the original position, so the user can modify their design layers, animation settings, etc, before playing their animation again. However, on the second run of this animation it seems the translated position is not working properly or some sort of caching mechanism is not recognizing the reverted cssText. It gets stuck to the left of the box where it was on exit. To give more details on this, my design software works based off finished designs, and once a design is finished the user can choose to have things enter the screen at different timings (as well as optionally exit after) I provide entrance, exit animations and in this case it rotates in from left, and rotates back out to the left. If you need more clarification, let me know. Issue #2 I'm having an issue with setting up a timeline without automatically playing. I've added the flag "paused: true" in the TimelineMax options, but what this does is begin positions for the element where the TimelineMax.from() defines, rather than keeping the element in it's ending position until we trigger play to run. I use a chained method in my code prepareAnimationTimeline() which should add all the timings, animation tweens together but returns the timeline object back ready to play, while not moving my elements. I use it like this: prepareAnimationTimeline().play() However if I do not call play, with paused: true, it will simply move my elements off screen in their starting positions for my entrance animations. (TimelineMax.from()) Is there any way to achieve what I'm looking for, where I keep elements on the screen and "prepare" my animation timeline in the fashion I mentioned above? Thanks, Justin
  13. BG image moves across the stage poorly, in a stepped fashion, when viewed in Firefox but runs smoothly on other browsers like Safari and Chrome. I'm on a Mac so I'm not sure how it appears on other. What am I missing in my code? http://motion.hotternellstudios.com/KICK/ad/
  14. Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob
  15. I have not made a codepen. It's basically that. I want to know how I can force the timeline to finish animating to the end or beginning. Just want the elments to return to the initial state without tweening while scrolling using scrollmagic or basically to press a button. I have tried pretty much all the timelinemax methods without success. somebody here with much experience then me should know. Thanks so much
  16. As you can see, I am trying to see if Timeline's progress is 0, then I play it and it expands the menu (empty) underneath, if it's 1, then it reverses it and folds the menu. Individually, everything works as intended. However, in order to avoid overlap of menus, I want to close the "other" menu before opening the target one, so I do Timeline.progress(0) to simply reset it to it's folded state. Unfortunately, this causes the timeline to reset to 0, and then to start playing again, which is not expected from the code... What am I doing wrong?
  17. Hi. I have not been able to find a solution and was hoping someone could help. Basically, I am trying to fade in/out an svg during the animation. At start, I would like to have the opacity transition from 0 at 0 seconds to 1 at 5 seconds (or half way through) and then again transition to 0 at 10 seconds (or the end of the animation). I need this animation to repeat infinitely. How can I achieve this? var snow = $("#snowflake"); var tl = new TimelineMax();var bezierPath = [{ x: 5, y: 4 }, { x: -5, y: 8 }, { x: 5, y: 12 },{ x: -5, y: 16 }]; tl.add(TweenMax.set(snow,{autoAlpha:0}));tl.add(TweenMax.to(snow, 10, { bezier: { type: 'soft', values: bezierPath, smoothOrigin: true, timeResolution: 12, autoAlpha:1 }, ease: Linear.easeNone, repeat:-1, autoAlpha:0}));
  18. I am trying to create a timeline where the target can be updated dynamically. When .play() is called, I want what is tweened to be based of the current $(this) jQuery object. The way I was attempting to do this does not seem to work. The codepen is a simplified version of my attempts: http://codepen.io/sithsev/pen/ENEbLz Is there a way to use a argument or parameter for this?
  19. Hello, I'm trying to use the method seek() to jump to a label in a nested timeline. The real example is a bit complex to reproduce in a codepen so I constructed a useless one just to show the issue. Baically I have a series of small animation contained in a another animation. This animation (the external one) has a duration equal to all the small animations inside. I would like to be able to jump to each of these animations, but apparently I can't. I'm sure there's a good reason for this, but is there any way to achieve what I'm trying to do?
  20. Guest

    timeline - animate along path

    Hi there, I am quite new to Gsap, I purchased the dev licence - its been great. I have stumble onto a bit of a problem though. I am trying to create a timeline which triggers animations along a path. Note: .to("#circle", 20, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone, repeat:-1}) works on my local machine, but .to("#circle-2", 20, {bezier:{values:pathTwo, type:"cubic"}, delay: -21, ease:Linear.easeNone, repeat:-1}); does not work
  21. im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance
  22. var d1=document.createElement("div") document.body.appendChild(d1) d1.style.left="0px" d1.style.top="0px" d1.style.width="100px" d1.style.height="100px" d1.style.position="absolute" d1.style.background="#ff0000" var p3to=new TimelineMax({repeat:-1,paused:true}) p3to.to(d1,1,{autoAlpha:1,physics2D: {angle: 0,velocity: 300,gravity: 500}}) p3to.to(d1,0.3,{autoAlpha:0},"-=0.3") p3to.render(0) p3to.play() it will throw an error Uncaught TypeError: Cannot read property 'length' of undefined
  23. Hey, I wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation. I feel that the solution is very easy, and I sit on it far too long to find them. CodePen: http://codepen.io/anon/pen/mOmbza
  24. I am using https://github.com/scottschiller/SoundManager2/ to play sounds in timeline. I am trying to launch "empty" animation with sounds execution using labels. So i would be able to define sound once, and then just repeat it with other animation in the future. Sound in codepen shoud play 3 times but it plays only once. What's wrong?
  25. Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position. I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this? Thanks in advance! .to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25")
×