Search the Community

Hello, i have 1 element. He must grow in width, height and border, and he do this. But have problem after when i did reverse (i showed two case) 1-case(icon-cursor-1): When click start and after complete animation click reverse() (after complete animation reverse) and again click start we see: border width jumping 2-case(icon-cursor-2): When click start and after complete animation click reverse() (after complete animation reverse) , he don't return primary value for border width (default border width 3px) P.S. if i write position 0(=0.75) for tweens, he return true value. Please help understand what i doing wrong, and how this work ? Sorry for my English =)

Hello I'm trying to find how to reverse all sibling tweens when clicking on one of them and then play its tween. Any Idea? Thanks $j('.menu_link_parent').each(function(index, el) { var $this = $j(this); var subMenu = $this.find('div.submenu'); var timeLine = new TimelineMax ({ paused: true, reversed: true, align: 'sequence', }); var anim = timeLine.staggerFromTo( subMenu, 0.3, { rotationX : 90, autoAlpha : 0 }, { rotationX : 0, autoAlpha : 1, onStart : app.fn.common.makeVisible($j('.tw')), onStartParams : $j('.tw'), }, 0.3, '-=0.3' ); $this.on('click', function(event) { event.preventDefault(); event.stopPropagation(); /* TODO : REVERSE ALL SIBLINGS FIRST */ anim.reversed() ? anim.play() : anim.reverse(); }); });

Hello everyone, I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!). I have elements on a page that have to change color and scale. After this I want to reverse the animation. I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe. I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want … At first I tried it in a timeline but am not sure if this is the appropriate thing to do for my kind of animation. var introTimeline = new TimelineMax(); introTimeline.append( TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); introTimeline.append( TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); Can someone here help me? I would really really appreciate it! GSAP looks awesome but I'm quite confused right now …

Hey Guys, Im quite new to GreenSock. Years ago a friend boasted about it when Flash was very popular, it was to defacto go-to library. So I'm trying to pick up a little bit as a hobby. I was wondering if anyone could assist me in understanding what I'm doing wrong here in my CodePen. I am simply trying to "Reverse" or "Yoyo" it back, so it keeps going back and forth. I tried several ways but I am certainly getting it wrong

Hello, I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended. My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried to solve this issues to give the search container a .data value open true or false, but somehow it will not work as intended. This may not be an explicit greensock probleme but rather a javascript logic problem, but I'd be very grateful if anyone may help me out. Timeline Code: (function($) { var $irpsearch = $('#irp-newssearch-container'), $irpsearchinput = $('#irp-searchform-input'), $search_icon = $('.irp-news-search-icon'), $btn_container = $('.irp-filter-buttons'), $filter_btn = $('.filter-btn'), $search_seperator = $('.irp-search-seperator'), $body = $('body'); var openSearchAnimation = new TimelineMax({ paused: true }) openSearchAnimation .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1) .set($btn_container,{'display': 'none'}) .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6') .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0') .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1'); openSearch = function () { $irpsearch.data('open', true); openSearchAnimation.play(); $irpsearchinput.focus(); return false; }, closeSearch = function() { $irpsearch.data('open', false); openSearchAnimation.reverse(0); } $irpsearch.on('click', function(e) { e.stopPropagation(); if (!$irpsearch.data('open')) { openSearch(); /* Body Click */ $body.off('click').on('click', function(e) { closeSearch(); }); /* Escape Hide */ $( document ).on( 'keydown', function ( e ) { if ( e.keyCode === 27 ) closeSearch(); } }); } else { if ($irpsearchinput.val() === '') { closeSearch(); return false; } } }); })(jQuery) Codepen: codepen.io/anon/pen/YQqQWm All the best Pascal

Hi, I am using scrollmagic to build a website where multiple panels overlap each other on scroll. Once you land on the 2nd panel, a separate timeline plays out, triggered by an onComplete function. When you scroll back up, I don't want the animation to replay, I just want it to scroll back up on the static last frame. But if you scroll all the way up, and then down, I would like for it to repeat. In my codepen, it only plays once, and I can't get it to replay the animation. What would be the best way to do this? Thank you, Jenny

I've got a number of timeline functions that are set inside of an object so that I can call them programmatically. You click a button with a number as a data attribute and it call a timeline method on one of these functions, like functions.function1.play(). I can get them to play(), but reverse() doesn't work. Am I missing something simple? var box = document.querySelector('.box'); var play = document.querySelector('.play'); var reverse = document.querySelector('.reverse'); var functions = { scale: function() { //console.log(this); var tl = new TimelineMax({paused: true}) .to(box, .5, {scale: 2}) return tl; } } play.addEventListener('click', function() { functions.scale().play(); console.log(functions.scale()); }); reverse.addEventListener('click', function() { functions.scale().reverse(); //alert('hey'); });

this.tl .to(alpha, 1, {x: 100, ease: Circ.easeInOut}) .to(beta, 1, {x: -100, ease: Circ.easeInOut}, 0) Hi, I'm wondering if its possible to exclude the second animation only when reversing the timeline. tl.play() should play both of them. but when tl.reverse() it should only play the animation on the "alpha" element.

Hi guys, I´m a fan of mini videos and would like to control a video by tweening - especially the reverse part. I saw the post https://greensock.com/forums/topic/9838-reverse-video-with-pauses/ but the video runs not smooth. Here is my pen: http://codepen.io/mikeK/pen/Zexqgp Kind regards Manfred

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!

Hey guys, var panWidth = $(".panContain").width(); var panImg = $(".panContain").find(".panImg"); var start = 50; var width = panImg.width() - panWidth; var tl = new TimelineMax({ onComplete: function onComplete() { start = 0; tl.reverse(); }, onReverseComplete: function onReverseComplete() { start = 0; tl.restart(); } }); tl.fromTo(panImg, 20, { "transform": "translate("+ -start +"px,0)", }, { "transform": "translate(-" + width + "px,0)", ease: Linear.easeNone }); Please Help, Here i want to set from value to "transform": "translate("+ -start +"px,0)" only when start. onComplete i want to tl.reverse() to "transform": "translate(0,0)" not 50 then again restart it from "transform": "translate(0,0)" not 50. Above my code does not reset start to 0 onComplete.

Hi Guys, I need to change the ease on a timeline on reverse, for example: var _easeElastic = Elastic.easeOut.config(1, 0.4); var _easePower2 = Power2.easeOut; function showNuts(){ _tl2 .to('#nuts',0,{opacity:1}) .to('#nuts', 0.4, {opacity:1, top:18, scale:1, ease: _easeElastic}) .to('#copyNuts', 0.4, {top:87, left:45, scale:1.5, ease: _easeElastic}, '-=0.4') .to('.copyNutsFill', 0.3, {fill: "rgb(232,230,1)"}, '-=0.3') .to('#copyJerky', 0.4, {top:85, left:21, ease: _easeElastic}, '-=0.4') .to('#copySeeds', 0.4, {top:85, left:22, ease: _easeElastic, onComplete:function(){ TweenLite.delayedCall(2, function(){ _tl2.updateTo({ease:_easePower2}); _tl2.reverse() }); }}, '-=0.4') } I know that updateTo is not part of the TimelimeMax, but that is to explain what I need when the timeline is reversed.

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!

Hey, I'm struggling with a callback and clearProps, I've tried few options (found here : https://greensock.com/forums/topic/7299-timelinemax-reverse-callback-problem/) and none of the solutions works, I'm probably missing something or I don't get it. navAnim.reverse(-1).timeScale(1.2).eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"})); Doesn't work navAnim.eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"})) navAnim.reverse(-1).timeScale(1.2); Doesn't work function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } navAnim.eventCallback("onReverseComplete", removeProps()); navAnim.reverse(-1).timeScale(1.2); Doesn't work navAnim.set(mainNav, {clearProps:"all"}); Works but no animation (which is logic), so it's not that clearProps doesn't work but the callBack; navAnim.tweenTo(0, {onComplete: navAnim.set(mainNav, {clearProps:"all"})}); navAnim.reverse(-1).timeScale(1.2); Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } navAnim.tweenTo(0, {onComplete: removeProps()}); navAnim.reverse(-1).timeScale(1.2); Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function TweenLite.delayedCall(navAnim.time(), navAnim.set(mainNav, {clearProps:"all"})); navAnim.reverse(-1).timeScale(1.2); Doesn't work function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } TweenLite.delayedCall(navAnim.time(), removeProps()); navAnim.reverse(-1).timeScale(1.2); Doesn't work Thanks

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

Hi guys, Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute? I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly. className: '-=responsive-example_small' This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation. I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain. Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')? If not, is it a possibility for the future? Thanks a lot!

Hi there. First of all I want to thank you for such a great animation platform as GSAP. I am beginner in it, and I have some questions. I have a task to animate my card of product. First it's just drawing a path of svg patterns. Second when onHover event is fired Iwant to put it up and put down them and drawing them in reverse direction simultaneously. More you can see on codepen link. I have done it, but when I call hover event in during the first animation, my svg path is cut. Why? What's wrong with it? I pin screen of bug http://joxi.ru/82QMg35TGO9b2d

I'm having a few problems getting the animation to reverse back to the origianl state when the mouse is moved. Currently the code just snaps back to the icons original state.becomes a bit jumping when you have multiple aniamtions on each page. Is the away so that when the mouse is removed either the animation finishes out the sequence or is reversed back to the original state. (istead of snapping back Kind regards, Ryan

Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0? function createTimeline(progress, ...elems) { let tl = new TimelineMax({ paused: true }); tl.add('beginning') .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone }) .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning') .add('middle') .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false }) .fromTo(elems[1], 1, { y: '0%' }, { y: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle') .add('end') .progress(progress); return tl; } I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for. I can make a CodePen if that would help. Thank you! EDIT Heres a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010

I'm having a problem with calling reverse on a timeline. It's jumping to the beginning and end of the animation. Can anyone help me solve this problem I'm having? Thanks, Ryan

Is there a way to reverse (invert) the direction of a Draggable instance? Thanks.

The codepen was set up to test a new dom capture library (npm dom-to-image) but I noticed a couple of things. First, I stacked the animations in the timeline using the shorthand method like... main.add(TweenMax.set("#quote", {perspective:400})) .add(TweenMax.set('svg', {x: 320, y: 50})); main.staggerFromTo(lines, 0.20, { drawSVG: '0' }, { drawSVG: '0 100%', 'visibility': 'visible', ease: Expo.easeOut }, 0.2) .staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, "-=4", "+=0") .fromTo('svg', 0.2, {scale: 1.0}, {scale: 1.5, ease: Power4.easeInOut, force3D:false}, 3) .reverse(); I noticed that reverse() wasn't working any way I did it. I thought reverse tacked onto the end of a timeline would automatically reverse it once the timeline had finished the entire duration. I was able to get it to work though adding an onComplete function like this... main.add(TweenMax.set("#quote", {perspective:400})) .add(TweenMax.set('svg', {x: 320, y: 50})); main.staggerFromTo(lines, 0.20, { drawSVG: '0' }, { drawSVG: '0 100%', 'visibility': 'visible', ease: Expo.easeOut }, 0.2) .staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, "-=4", "+=0") .fromTo('svg', 0.2, {scale: 1.0}, {scale: 1.5, ease: Power4.easeInOut, force3D:false, onComplete: backOut}, 3); function backOut() { main.reverse(); } Oh, and one other thing, to PLAY the animation, click the Preview button. The Record button is just to test the dom-to-image library. Just in case you want to try that out, I had to be in debug mode to get it to act right. In Edit mode, it's like the Bounce ease is getting applied to every draw that DrawSVGPlugin makes. Works fine in debug or live mode - http://codepen.io/swampthang/live/BzJrNW

Hi, I created a timeline with lots of tweens, these tweens have delays on them and what I need is to skip all the delays when I reverse this timeline, long story short on reverse all the tweens must start immediately. Thanks in advance

Hi there, I am trying to create the effect of one shape morph in width from target1 to target2. And then morph back from target2 to target1 using .reverse() However I am unsure why my .reverse() isn't working? Cheers, Venn.

Todays last question Is there a way that when I reverse an animation I can choose for it not to run until the very beginning (seeing as there is a way that I can reverse from before the end of animation). I tried the following since I wanted the 'reversed' version of the animation to stop 2 seconds from its beginning (otherwise it fades out to blank). But it didnt work. var callbk = tl.eventCallback("onComplete", doReverse); function doReverse() { tl.reverse(); timeline.addPause(2); } Perhaps there is a way I can continually listenfor progress during the reversal and break/pause at a certain time? Ideas welcome, in your own time. I'm done for today!