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

Found 115 results

  1. 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. Learn how to make a simple play / pause toggle button to control any GSAP animation (tweens or timelines). Same concepts apply to toggling the reversed() state of an animation too. Watch the video Explore the demo See the Pen Toggle Play Pause by GreenSock (@GreenSock) on CodePen. Core code tl.pause() // pauses the animation tl.paused() // gets paused state, returns true or false tl.paused(true) // sets paused state to true tl.paused(!tl.paused()) // sets paused state to inverse of current paused state. // reverse methods tl.reverse() // reverses the animation tl.reversed() // gets reversed state, returns true or false tl.reversed(true) // sets reversed state to true tl.reversed(!tl.reversed()) // sets reversed state to inverse of current reversed state.
  2. I am newbie to GSAP and wonder why my menu animates just ones. I would be grateful if you helped to fix the code. Thanks a lot.
  3. Hi, I'm having a issue with TimelineMax. I've created a timeline that opens and closes the drawer in my navigation. It works, but eventually if the first time I move the mouse above the navigation elements (that triggers the animation), one of the timelines doesn't work anymore. I'm executing the timeline on mouseenter triggered by the main navigation items. Then I'm playing the timeline reversed when it's triggered a mouseleave by the container of the entire navigation. You can see the working example in the following video (password: codepen). The problem happens when I move quickly the mouse over the navigation items. I managed to film it in this video (password: codepen) And here the video that shows the error (password: codepen)
  4. I'm playing a sequence of images which I then want to reverse. This needs then to loop twice. I have the loop JS, but the documentation for .reverse(); doesn't initiate the reverse at the right time, it reverses it right at the beginning. If anyone could point out what I'm doing wrong that be great. Thanks!... Code here: tl.from(this.image_1, 3,{ alpha:1, ease: Power2.easeInOut }) .to(this.image_1, 1, { alpha:0, ease: Power2.easeInOut },'image_1') .to(this.image_2, 1, { alpha:1, ease: Power2.easeInOut },'image_1-=2') .to(this.image_2, 1, { alpha:0, ease: Power2.easeInOut },'image_2') .to(this.image_3, 1.5, { alpha:1, ease: Power2.easeInOut },'image_2-=2.5') .to(this.image_3, 1, { alpha:0, ease: Power2.easeInOut },'image_3') .to(this.image_4, 1.5, { alpha:1, ease: Power2.easeInOut },'image_3-=3') .to(this.image_4, 1, { alpha:0, ease: Power2.easeInOut },'image_4') .to(this.image_5, 1.5, { alpha:1, ease: Power2.easeInOut },'image_4-=3.5') .to(this.image_5, 1, { alpha:0, ease: Power2.easeInOut },'image_5') .to(this.image_6, 1.5, { alpha:1, ease: Power2.easeInOut },'image_5-=4') .to(this.image_6, 1, { alpha: 0, ease: Power2.easeInOut },'image_6') .to(this.image_7, 1.5, { alpha: 1, ease: Power2.easeInOut },'image_6-=4.5') .to(this.image_7, 1, { alpha: 0, ease: Power2.easeInOut },'image_7') .to(this.image_6, 1.5, { alpha:1, ease: Power2.easeInOut },'image_7-=5') tl.reverse(0);
  5. Hi all. How can i make reverse for one element after click on different buttons? I need play/reverese onclick on div and button with same data-id
  6. Hi guys! I am a beginner at JavaScript. I created codepen with hover animation. So, when I hover the blue square, the first animation begins. Then, when the first animation ends, the second animation begins. When the mouse leaves, the first animation reverse, but the callback function stills working. I need reverse for the animation inside the callback function when the mouse leaves. How can I do this?
  7. Hi all, Been a while Working on a project with a fullpage menu. On that menu I've got a line under each menu link which gets triggered on hover via the following statement. Unfortunately when I click any of said links and go to another page, when you open the menu again the corresponding line from the previous page is still visible. Obviously that hover out does not trigger due to the cursor not moving off the menu element, so we have to somehow do it via click. One would think you could just check if the animation is reversed on click, if not reverse it... however no cigar as of yet. https://codepen.io/wsdesign/project/editor/XveMOR Hopefully someone can see what's going wrong! Cheers, Smallio $(".menu-link-wrap").each(function(i, element) { var tl = new TimelineMax({paused:true, reversed:true}); var menuHoverLine = $(this).find(".menu-hover-line"); tl.fromTo(menuHoverLine, 0.4, { scale:0 }, { scale:1, transformOrigin: "center", ease:Power1.easeInOut }); function toggleReverse () { if (tl.reversed() === false) { tl.reverse(); } else { console.log("already reversed") } } $(element).hover(menuLinkHover, menuLinkHover); $(element).click(toggleReverse); function menuLinkHover() { tl.reversed() ? tl.play() : tl.reverse(); } });
  8. Hello good people. I have a strange questions. I created animation play / reverse, but to start it I need to click twice and after that it works as it's should be... Any suggestion for this weird behaviour? Thanks! ❤️
  9. I have a project that I am building and unbuilding cards to a screen based on User feedback. My goal is: animate in the cards (TimeLine.staggerFrom) user chooses new set animate out the cards (using Reverse) onReverseComplete (load the new set of cards) Empty the container of cards Append the new HTML Animate in the new cards But the issue is my reverse complete is firing before the timeline is complete... I am guessing it is happening when a child card completes, I would like it to happen when the whole timeline reverse complete
  10. I have a Dropdown Navigation with sub-menu-points that are revealed on click. For this I created a timeline with 2 tweens: A tween that changes the height and opacity of the next menu points A tween that animates the menu points from left to right. The forward animation works fine but the reverse function only reverses the second tween — however without any animation. The first tween isn't reversed at all. Any idea on what I did wrong? Thanks so much.
  11. Hi guys, i search some code example on this forum, but i found nothing that show a Pendulum effect with tweenLite or with TimelineLite? Someone would have a functional example to create a permanent pendulum effect? My target it to get something similar that spine2D allow. for help to understand, i just want replace spine by vanilla js and vanilla tweenLite feature, because i get more performance after my test with tweenLite. But am not sure how do a pendulum loop with tweenLite. If you can provide me demos or link to the docs it will be wonderful Maybe i just don't get the good keyword for search! sorry again for poor english, thank guys.
  12. Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)
  13. I'm looking to reverse the TimelineMax onComplete but I can't seem to get it to work. I'm new to this library, there are probably better ways to achieve what I want here. I'll list out the goals: Auto play a tween of the blocks from left to right (working in this Codepen) On mouseover and eventually on touchover reverse the animation with reduced speed and continue to move (working in this Codepen) When the animation goes fully out of the window reverse and come back across the other way (not working) I've tried a few different ways/options but no luck so far. Any help would be appreciated.
  14. Hi Guys, I hope you could point me on the right track to be able to make a animation in and reverse approach on this current pen that I attached. My goal is when I enter the section which will be active I wanted to animate all the elements inside (that I can do). My problem is reversing the animation before leaving the current section. Anyway, as you can see on the pen its a scroll wheel transition. Best Regards, Mikhail
  15. Hi I have a mouseenter / mouseleave effect on a button. I'm using this method to prevent a CSS / JS conflict on the button which is also part of a pageload animation. I can get the timeline to play on mouseenter, but I can't seem to get it to reverse on mouseleave? Codepen link with HTML and CSS is included, and below is the JS/GSAP code for quick reference // GSAP / JS // --- button fade in function, invoked in subsequent timeline function buttonFadeIn() { var tl = new TimelineMax(); tl .to(".btn", 1, {opacity: 1, ease:Power3.easeIn}) .to(".btn a", 1.8, {opacity: 1}) return tl } // --- invokes initial fade in on pageload function homeTitles() { var tl = new TimelineMax(); tl .add(buttonFadeIn()); } homeTitles(); // --- mouseenter / mouseleave on 'Learn More' button var learnMore = document.getElementsByClassName("btn")[0]; // --- function that is invoked on mouseenter/ mouseleave function learnMoreHover () { var tl = new TimelineMax(); tl .to(learnMore, .3, {opacity: .3}) return tl; } if (learnMore) { learnMore.addEventListener("mouseenter", function(){ learnMoreHover().play() }, false); } if (learnMore) { learnMore.addEventListener("mouseleave", function(){ learnMoreHover().reverse() }, false); }
  16. Hi guys, This is more of a pre-sale question than a problem, to be honest. But I do need some help with the Javascript/jQuery. I'm working on an SVG animation using Anime.js, but I feel that there are limitations to the animation that's possible for SVG. I was trying to replicate https://thieb.co homepage animation. So basically on mouse down, the animation starts playing, and mouse up, the animation reverses to the empty state. Due to Anime.js's limitations, I was wondering if DrawSVG is able to replicate the aforementioned effect? With a 'completed' callback to prevent the animation from reversing once completed, etc. Here's what I got so far: http://alfianridwan-fms-stories.netlify.com/ with Anime.js Is it possible to replicate this with DrawSVG? (before I purchase the membership and find out that I can't replicate it!) Thanks, Alfian
  17. 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.
  18. 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 the following but failed: mtl.remove(getPinTimeline()).reverse() mtl.seek(getPinTimeline().totalDuration()).reverse() I have also tried creating a duplicate timeline but failed: var mtl2 = new TimelineMax(); mtl2.add(getSpinTimeline()) .add(getRotateTimeline()) mtl2.timeScale(2.3).reverse(); Any idea how I am able to fix this? Thanks, Venn.
  19. 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
  20. 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.
  21. Hey, there! Is there a way to update the value inside tween when getting the animation reversed? For now I need some kind of fake preload animation, before modal window loads, so I'm using delay parameter with a variable value . But when I'm closing modal window (by clicking on a background layer), animation reversing but considering that delay. Is there a way to change that variable value on reverse?
  22. Hello again, I'm back with another issue I'm facing. I am aiming to have a background that moves to give the impression of the sprite movement (essentially moving the viewport but not). To achieve this I have made repeating Tweens which move from one side of the page to the other and put them into timelines for X and Y. To get a feeling of speed I have been messing with the TimelineMax timeScale. The issue I have found is that going up (-ve timeScale) soon results in the timeline reaching progess = 0. This is likely to be an issue travelling left also. I have had a look at a similar topic here: however this has not worked well for me. I believe this is because I am not calling reverse(), rather I'm using negative timeScale. Does anyone know a fix for this that will work well, and is there a better way I should be doing this which would make it easier to repeat etc..? Thanks for your help Jareth
  23. 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 =)
  24. 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(); }); });
  25. 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 …
×
×
  • Create New...