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. 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
  2. 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 s
  3. 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
  4. 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})
  5. 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 'compl
  6. 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.
  7. 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
  8. Is there anyway we can omit some tweens when doing reverse() ? I have this code menuTl .set($('.header_overlay_padding', header), {marginTop: $('.logolink', header).outerHeight()}) .to(header_overlay_menu, 0.3, { y: 0 }, "start") .set(header, {className: '+=light-header'}) .staggerFromTo($('.thb-header-menu>li>a', header), 0.5, { autoAlpha: 0 }, { autoAlpha: 1 }, 0.1, 'color') .staggerFrom($('.thb-header-menu>li>a', header), 0.3, { color:'#fff', clearProps: 'color' }, 0.1, 'color+=0.5') *** .to(bar, 0.5, { cssRule: { scaleX: 1, opacity:
  9. 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 posit
  10. 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.
  11. 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?
  12. 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
  13. 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. Pl
  14. 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, {
  15. 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
  16. 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
  17. 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 t
  18. 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
  19. 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})
  20. 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.
  21. 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
  22. 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 `Tw
  23. 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
  24. 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, onCompl
  25. 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!
×