Jump to content
Search Community

Search the Community

Showing results for tags 'reverse'.

  • 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. 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
  2. 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
  3. 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
  4. 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'); });
  5. 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.
  6. mikel

    reverse a video

    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
  7. 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!
  8. 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.
  9. 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.
  10. 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!
  11. 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
  12. 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
  13. 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!
  14. 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
  15. 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
  16. 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
  17. 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
  18. Is there a way to reverse (invert) the direction of a Draggable instance? Thanks.
  19. 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
  20. 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
  21. 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.
  22. 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!
  23. Hey there Since I am rather an amateur, I find it difficult to resolve the following issue: So I have this circle animation that moves on the left side of the page when clicked. Everything nice so far. However, the plan is to show the body of my page after I click and hide it again after I click the circle again, making the circle to come back on its initial size. I know that there should be some kind of procedure where i set some variables with the names of the div i want to show, but i do not know how to chain more animations and keep them under the click event that i have on the circle. The main idea of my website is that, when the user accesses it, he could see only the circle and, after he clicks it, the content of the page is showed. Something similar to this website: http://sergeymast.com/ (i know that most of his animations are in css but i want to improve my gsap skills along the way). Thanks in advance for the help, I really appreciate it!
  24. Hello ! I've created a timeline and add this specific tween. Everything work well when I fired myTimeline.play(); The problem is when I fired the reverse() function, open var doesn't decrease and stay at 31. Here the part of the code which doesn't reverse var tweenValues = { open : 1 }; myTimeline.fromTo(tweenValues, 2, { open: 1}, { open: 31, onUpdate:function(){ var srcCeil = Math.ceil(tweenValues.open); target.src = './img/img'+ srcCeil +'.png'; }); If any of you have an idea ? Thanks !
  25. Hi at all, I'm trying to use the reverse function to do the opposite motion, but I need to create a custom reverse function because each image remains on “display block” and does not apply “none” as when it is in play. I would use the reverse to navigate from the last to the first element by applying the same function of the play. Can I create a custom function to reverse? Is there any other way to figure out? Thanks to all, Alvise
×
×
  • Create New...