Jump to content
GreenSock

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

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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. 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: '-10
  2. 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
  3. Is there a way to reverse (invert) the direction of a Draggable instance? Thanks.
  4. 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}, {sca
  5. 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
  6. 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.
  7. 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 progr
  8. 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 t
  9. 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 !
  10. 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
  11. Hey guys, I am very new to GreenSock and I having some issues. I have a button that when you click, plays the animation. But is there a way to set up the JS that when you click the same button again, it reverses the animation? Thanks!
  12. Hey folks, either I´m blind or there is no answer yet to my question: I would like animations only to happen once when scrolling in, but when scrolling out (backwards, so the trigger is active again) and then scroll in again I dont want the animation to reverse and run again. So long story short: the animation should only be triggered once and then the animated elements should stay where they are forever indepently of scrolling back:) I found only this http://greensock.com/forums/topic/7832-disable-reverse/ but it seems not to be up to date anymore. Is there a simple way to ach
  13. Hi there I'm working through some of the concepts of GreenSock and was hoping someone could point out to me the issue with this animation. As you can see in the codepen the slider measuring the duration of the entire timeline is only about 80% through when it appears all my animations are finished. As a result, when I got to reverse the animation, there is a considerable delay before an animation kicks in. Thanks DB
  14. Is it possible to add timeScale when playing a timeline with this method:? timeline.reverse() I'm running play timeline within a 'if scroll is this' loop and would like to reverse the timeline with faster speed on the 'else' statement like this: if (scrollTop < 64) { timeline.play(); } else { timeline.reverse(); } Thanks for your time. Yan
  15. Hi team, I have a problem with my code that I can't solve. So what I have is a master timeline that have 3 nested timelines: getSpinTimeline(), getRotateTimeline(), getPinTimeline() var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); mtl.timeScale(2.3); After the animation has ended, I hit on a button I would like to reverse() the animation. It works fine if I do mtl.reverse(); But what I am trying to achieve here is to remove getPinTimeline() and reverse only getRotateTimeline() and getSpinTimeline(). I tried th
  16. Hello, I'm not a coder I'm sure you'll be able to tell I have the start of my SVG menu button working, now I want it to reverse the "menuClick" animation on click. Please can you help? Many thanks, Jimmy
  17. Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power
  18. I'm wondering if anyone has seen this or knows something I could try to fix it. I am flipping a card over and animating it to the center using a timeline. To return it to its former position, I reverse the timeline. Most of the time it works great, but in 5-10% of the cases, the timeline will not complete all the steps when reversed. Sometimes the card gets "stuck" in the center of the screen or the z-index isn't set back to default. To demonstrate, go to this site: http://gaylord.dluxstudio.co/home.html. Click on the "Brain" card and then any other card to show the flip. Clicking the "X"
  19. Hello, I have a little problem understanding the function of reverse TimelineLite. If someone has 5 minutes to help me understand, would be nice. $('#plop').on('click', function() { $(this).toggleClass('is-open'); // Animation var animNav = new TimelineLite({ paused: true }); animNav.to('#nav', 0.2, { x: 100, opacity: 1, ease: Sine.easeInOut }) .staggerTo('.nav-link', 0.1, { opacity: 1, ease: Sine.easeInOut }, '0.1', '-=0.15'); if ($(this).hasClass('is-open')) { animNav.play(); } else { animNav.reverse(); } return false
  20. Hello, in the following link, i have a sample o collapsing a header height with tweenmax, but in the line 84 a create a variable to get the height of the header, when the header is collapse the console show me 140px, but when is open show me 45. In the big height shows me the small height and viceversa. I use the reverse function to open and close the header, how to get the correct value of the header and not the reverse reference o the height. The link with the example here: http://jsfiddle.net/Gonzalo2683/0veqxee1/ Thaks
  21. I'm a little bit stumped on how to make this feature work... I've got cards are flipping the way I'd like them to (Thank you GSAP!) However I want to add the functionality that if a card is already flipped over and the use clicks on another card's 'view' to flip a second card over... I want the first card (that is already flipped over to it's back) to play in reverse (and go back to its starting position) and then the second card can flip over. Much like this: http://www.google.com/landing/now/#cards/ Any help is GREATLY appreciated, as I can't figure out the proper way to ach
  22. Hi all, New to Greensock so bear with me I've created a sidebar which is hidden, when you mouseenter the sidebar, it fires TimelineMax to animate the sidebar open. When you mouseleave it reverses that timeline. This works great. If you hover over the sidebar, even erratically, it behaves as expected. Now, I have a nav item inside the sidebar which, when clicked, fires another timeline which opens a full page subnav. I set a variable to say this subnav is open so I can keep the sidebar open. So the reverse will only run if the subnav is closed. If you hover the sidebar and c
  23. tween = TweenMax.fromTo(class_name, duration, {top: start_y_percent, left: start_x_percent, scaleX: 0, scaleY: 0, xPercent: -50, yPercent: -50}, {top: end_y_percent, left: end_x_percent, xPercent: -50, yPercent: -50, scaleX: 1, scaleY: 1, onReverseComplete:hide, ease: Elastic.easeOut}).progress(current_progress); Box elastic eases in, but on reverse(), I don't want the elastic ease (just the default ease). I've looked at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/reverse/, but not sure if possible using reverse(). If not, what's the best way to do this? Thanks. UPDATE:
  24. Hello I've got a modal which appears on a button click. I use clearProps to remove inline styles. tl.add(TweenLite.from('.ng_modal_dialog', 2, {left: "30%", backgroundColor: "red", clearProps: 'all'})); Then I do reverse(). Which adds them all back again. Can I clearProps after I've done reverse()? Thank you.
  25. Hello and thanks and congratulation for this amazing tool. Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working: http://co
×