Jump to content

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


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hello, Do you think if it would be useful to add onPause/onStop event callback? So the state of timeline could be obtained more convenient way? Or maybe I miss something? States: - never played - playing - paused/stopped/killed but not completed - paused/stopped/killed and completed
  2. I test different solutions , but I have a question – I'd like to animate only element with class active. Currently the first element animates third element, why? I learn JavaScript, but still a lot of work ahead of me
  3. Hello fellow tweeners! Hit a brick wall here even though I feel like I've done the hard part. I've been referring to documentation for hours trying to solve this. I'm trying to fire my page loading counter after it fades in, via the tween that does so. Everything is setup & neatly organised/labeled but I'm just butchering the last part lol. The three parts I'm using are marked with lots of asterisks & notes explaining what I'm trying to do. The load counter needs to be nested inside the "onComplete" callback which is already being fired by my tween (console log works)... just not able to get the countdown in. *sigh* Any help would be massively, massively appreciated. Loving the library & community equally! Cheers, Smallio Sorry for the newbie question <3
  4. Hi, I would like to create a timeline "A" from which I do some animation and then play another timeline "B" and potentially a timeline "C". I know I can do that by doing A.add(B.play) but as I understand it it merely means B is started at the point in A where I include it. I would like to ultimately be able to fire a callback once A, B and C are all finished without having to worry about whether B plus the elapsed time in A before is start B is longer than the total duration of A. Is there a nice way to create this structure and add a callback once all the timelines end? Best regards, Miry
  5. Hi there, i have a timelineMax with many animations added. when i click a button i want reset the timeline and add completly new animations to the timeline so i do: timeline.clear() timeline.to(myAnimation) timeline.restart() unfortunately some svgs are stuck in the middle of the former Animations, because the restart/clear doesnt wait till the end of those animation, but interrupts them. How can i wait till the current animation has finished and then restart/clear? Im not at the end of the timeline so timeline.progress() is not an option. Thank you
  6. Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over nav button(.dropdownmenu-button) that triggers dropdown with animation in it.... but it only seems to trigger the first div and the rest dont trigger. Similar to this - https://www.open-wear.com/ //gsap animation of elements in dropdown navigation var toggle=0; var tldropdown = new TimelineMax({paused:true}); var items = $('#dd-heading'); var list = $('.dropdownmenu-button'); tldropdown.staggerTo(items, 1.5, {x:20,opacity:1,delay:.5}, .5) .addPause(null,function(){ if(toggle)tldropdown.play(); } ) .staggerTo(items, 1.5, {x:20,opacity:1}, .5) function over(){ tldropdown.restart(); toggle=0; } function out(){ tldropdown.play(); toggle=1; } list.hover(over, out);
  7. Hello, First time posting here, but already learned a lot of great things on this forum. Thank you community! I am having a problem with playing timeline from a certain point (label). I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline. const master = new TimelineMax(); master.add( preload ) .add( audio_togle, '+=13' ) .add( particles ) .add( navigation_show ) .add( videoSize, 'particles+=2' ) .add(function () { videoPlay('intro') }) .add( parallax ) .add( scene_first_show, 'scene1show' ) .add( pause ) .add( scene_first_hide, 'scene1hide' ) .add( pause ) .add(function () { scene(text[0]) }, 'home' ) .add( pause ) .add(function () { scene(text[1]) }, 'about') .add(pause) .add(function () { scene(text[2]) }, 'contact') .add(pause) .add(function () { scene(text[3]) }, 'portfolio') .add(pause) .add(function () { videoPlay('outro')}) .add( scene_final, 'finalLogo') .add(pause) function pause() { master.pause(); masterIsPaused = master.paused(); console.log('Master is paused'); } And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. mainNavItem.on('click', function () { $self.addClass('is-active'); mainNav_hide(); var whatToShow = $self.data('show'); master.seek(whatToShow); }); But `master.seek(whatToShow);` doesn't work at all. How can I jump to certain label and play from there? Thank you, Mo
  8. Hi, I ran into some odd behavior with TimelineMax recently. When setting 'display:none' in the timeline, and running it in reverse, everything works as expected - most of the time. Quite often though (it's completely random), the display property does not get set - or reset if you will - when reversing, leaving it at 'display:inherit' after the animation is done, as demonstrated in the fiddle. You need to open the debugger to see it (and click the button until it occurs). https://jsfiddle.net/rvq96mht/ Adding 'clearProps:display' at the start of the timeline is causing other issues, such as 'display:inherit' not being set when expanding. The behavior is consistent in both Chrome and Firefox. Any ideas?
  9. Hi, Is it possible to have a negative delay on a timeline. var tl2 = new TimelineMax({delay:-10, repeat: -1}); tl2.fromTo(".cloud-container-2", 5,{top:200, scale:1, opacity:0}, {top:200, scale:1, opacity:1, ease:Power0.easeNone}) tl2.to(".cloud-container-2", 5, {top:300, scale:2, ease:Power0.easeNone}) tl2.to(".cloud-container-2", 5, {top:400, scale:3, ease:Power0.easeNone}) This does not work.
  10. Basically, every time a tween is called in my timeline, I want to recheck the value to be tweened by. `generateValue` seems to be only called once. When I resize the window every time the tween is called it uses the value it first generated. Help would be very much appreciated! function generateValue() { var value; // if window is smaller than 520px if (Modernizr.mq('(max-width: 520px)')) { value = $window.width(); } else { value = 420; } return value; } TweenMax.to($myElement, .2, [x: generateValue});
  11. Hi all, I'm very new to GSAP, so here is my question: let's say i've a page with different post or project elements, each one made by a container and all his childrena. I've a timeline that define the animation i want to use to "unfold" this kind of containers, but since each one have the same sub-elements with the same classes, everything happen at the same time. The staggerTo method would create a sequence just within the same element of each class in all the container at the same time. Instead, i would like that each of those container unfold indipendently, or actually with a minimal delay between they all, each one fallowing the same timeline. Is there a way to do that? Was my explication clear enough? Thank you all!
  12. 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!
  13. I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely? Here is my js right now: var $loader = $('#load'), tl; tl = new TimelineMax({repeat: -1}); tl.from($loader, 1, {x: '-=40%', transformOrigin:"0% 50%" , autoAlpha: 0, scaleX: .2, ease:Power2.linear}) .to($loader, 1, {x: '+=60%', ease:Power2.linear}) .to($loader, .8, {x: '+=10%',autoAlpha: 0, scaleX: .2, transformOrigin:"100% 50%" , ease:Power2.linear});
  14. Hi, I just plugged GSDevTools to my js file, but GSdevtools not picking up my timeline IDs, and also it default to Global Timeline and continue to play till 90.00sec. why is that? function gotoNext($out, $in) { var tl = new TimelineMax({ id: "sliderOut" }), $slide_left = $out.find(".slider-left"), $slide_svg_path = $out.find(".svg-bg > .svg-bg-left"), $slide_name = $out.find(".slider-project-name"), $slide_desc = $out.find(".slider-description"), $slide_tech = $out.find(".slider-tech > ul li"), $slide_right = $out.find(".slider-right"), $slide_static_name = $out.find(".slider-static-title"), $slide_on = $out.find(".slider-no"), $slide_img = $out.find(".slider-img"); tl .set($in, { autoAlpha: 1, className: "+=active" }) .set($out, { className: "-=active" }); // other tweens } GSDevTools.create({ id:"#sliderOut" });
  15. JohnH

    Animate before Drag

    Hi there, new to the forum, so first of all thanks for having me! I'm also new to gsap as well. The question I have is; Whenever I use 'Draggable' and I want to animate the object or element that is being dragged, I want to have it animate onmousedown so that as soon as the object is touched it expands. How can I do this as I've always had my animations run when the object is moved instead of animating before being moved. Is there a clever way gsap can do this or do I need to add a mousedown function? Thanks in advance, John
  16. Hello everyone at GSAP forum. I appreciate any help with my problem I've been solving some time. There are few things I can't understand. This is my problem: Because I need to use some Tweens or Timelines repeatedly I decided to create functions with these Tweens/Timelines. These functions are appended to Timeline by .call() or .add() (both doesn't works) like this: var myTimeline = new TimelineMax() .add(down) .call(up) .add(TweenMax.to("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} )) ---------- function down() { var downTween = new TimelineMax() .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } ----------- No function in myTimeline waits for previous to complete - everything plays together - I'm not used to this behavior. I don't wanna use labels or something like that - I need them to chain (first one ends - second starts) as usualy when I add only tweens into timeline. Well, I tried to resolve my problem by some tricks but meet even more problems 1) I tried to use .pause() and then .resume() or .play() in my functions function down() { myTimeline.pause(); var downTween = new TimelineMax() .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } myTimeline.resume(); 2) I tried to use onComplete function down() { myTimeline.pause(); var downTween = new TimelineMax(onComplete:myTimeline.resume()) .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } I don't know why nothing works. What do I do wrong? Can anybody give my some explanation, please? Thanks a lot in advance. Peter
  17. Hi everybody, I'll start by saying that Greensock is amazing and I love it Also, great forum! Already found a few solutions by going through some of the threads here. I'm trying to make a character walk on a path when the page scroll reach certain points. After a few tries, I went forward with the following solution: 1. animate the character on each path using top left with percentage so that the horizontal roads can be responsive 2. this way, I can create the entire animation from the start, and just forward the animation to the correct position (or even backwards) 3. potentially, I can make the animation slower of faster to make the character walk faster (this will effect both the sprite animation and the walking) Now, I'm at a point were the basics work. the character follows your scroll (it feels as if he's trying to catch up with you). Later, I'll add more points across the path to make him walk shorter distances Now, i'm having problems with 3 more things I want to accomplish: 1. make him go faster for bigger distances (if you scroll super fast, he should speed up the animation up to a certain max) 2. try and make the tweenTo function start at the same speed as the current speed (but still speed up and slow down overhaul if that's possible) 3. change the direction of the sprite. currently, on reverse(), the character just walks backwards. I want a way to change the sprite's background position to a "up walk" and "left walk" to make it better. Can this be done only by creating two different animations? I would really appreciate any help trying to fix those problems. I'm kind of stuck at this point, reading all the docs I can find
  18. Hey guys, My hover animation is on an infinite loop. After mutliple loops, on mouseleave, my animation will reverse all the loops. I need the timeline to reverse the loop only once before stopping. I've been using .time but I guess it is not the best method. Any help would be apreciated, thanks in advance.
  19. Hey guys ! I've been trying to make this slider for the couple couple of days without much success. I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. Here is a snippet of my js. $(".right-arrow").click(function() { var contentSlides = $('.slider .slide'); var currentSlide = 0, tl = new TimelineMax(); tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10} ); if ( currentSlide < contentSlides.length ) { currentSlide++; } else if( currentSlide == (contentSlides.length -1) ) { currentSlide = 0; } tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 100% 0 0)", x: -40}, {webkitClipPath: "inset(0 0 0 0)", x: 0} ) }); Thanks in advance
  20. Hello, Is there a way to run onComplete function of all nested timelines after main timeline finished playing? I have a two areas at page - one is carousel list (left <- center/current -> right) and second is menu (div with buttons) which slide to left or right. I defined a drag event which unites two effects - carousel slide and menu slide. main timeline is controlled with .progress(X, true) function and after reaching 80% limit and dropping (mouseup), state changes and both effects need to be reset in their onComplete. The problem is that duration differs (first is 0.4, second is 0.6 - both start at the same time) and first effect doesn't fire onComplete after drop event plays main timeline - .play(null, false).
  21. GreenSock


    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment Requirements GSDevTools requires TweenMax (well, actually just CSSPlugin, TweenLite, TimelineLite, AttrPlugin which are all included in TweenMax) version 1.20.3 or higher. It also uses Draggable under the hood, but in order to minimize hassle for end users, Draggable is included inside the GSDevTools file itself. How do I get it? GSDevTools is available to Club GreenSock members ("Shockingly Green" and above). Just download GSAP with the bonus files zip from your Dashboard. Try GSDevTools for free on CodePen. FAQ Why is my Global Timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. Does loading GSDevTools impact runtime performance? Since it must monitor and record the root timeline, yes, there is a slight performance hit but probably not noticeable. Keep in mind that usually you'll only load GSDevTools while you're developing/reviewing your animations and then remove it when you're ready to launch, so ultimately it shouldn't be much of a factor anyway. Why isn't GSDevTools in the CDN or Github repo? Because it's a membership benefit of Club GreenSock. It's a way for us to give back to those who support our ongoing development efforts. That's why we've been able to continue innovating for over a decade. See https://greensock.com/why-license for details about our philosophy. Does GSDevTools work with other animation libraries? Nope, it depends on some unique capabilities baked into the GSAP architecture. What will I do with all the time this tool saves me? Take up a new hobby, ponder deep philosophical questions, make cookies - it's up to you.
  22. Hi, I wondered why the only way I can trigger a quick reveal in Nested Timelines, is by using a duration longer than 0. As you can see in the CodePen example, the Blue, Green and Yellow circles should reveal themselves halfway through the Red circle's Timeline, but .set and a duration of 0 trigger initially, whereas the only way round it is to use 0.00001
  23. Codepen doesnt work btw dont know why.. Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back. How do i do this? i commented out the .from because it will do that first and then the rest of the code. Why is this? Ty guys
  24. 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!
  25. I'm new to greensock, and I realy like it sofar. Here is my problem. I have 2 div.product's and inside are 2 children, one needs to animate to the lef and one needs to animate to the right. I want this to happen for every .product div , but in sequence. Right now the animation starts with both the .left divs, and after that the .right divs start to animate. Is it possible to index the .product divs? and iterate over each one, no matter how many .products div there are? I would like to stagger them in sequence but I can't figure it out and I hope I'm explaining myself right...