Jump to content

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

Search the Community

Showing results for tags 'tween'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 170 results

  1. Hi there, TL;DR How to prevent the gsap animations to be aborted in react because of a rerender/prop change How to use dynamic props/state inside a gsap tween without beeing interrupted I'm building a spinng wheel with dynamic start- and end-points. You guys already helped me a lot with this: Now I need to implement this into an acutal react application. The biggest problem is, that I use dynamic Properties inside my gsap tweens to calculate e.g. the stop position or when to stop animation. React rerenders my component and aborts the whole animation as soon as a property changes. Of course react should do that - but how to I keep my animation running? What my code should do: start spinning by clicking the "Start Spinning" Button Wheel is spinning infinite Stop wheel by clicking the "Stop Spinning" Button Wheel at least the minimum amount (5) and then stops at the set position What my code actually does: start spinning by clicking the "Start Spinning" Button Wheel is spinning infinite Clicking "Stop Spinning" does not work -> triggers in my local invironment a rerender and aborts the animation in codepen it flickers and then nothing happens (the stop position is never passed into the tween) ... In the codepen it actually does not rerender but the updated prop won't be passed into the tween. const loopAnim = gsap.to(circleRef.current, { rotation: "+=360", ease: "none", duration: 0.5, onComplete: () => { // The props won't update in here... if (loopIteration.current >= fullSpins && typeof stopAt === "number") { stopAnim.play(); } else { loopIteration.current++; loopAnim.play(0); }, paused: true });
  2. Hi guys, how can I get instantiated tween's ease function name? I could do a workaround, but is there a way that is meant to be used :-) ? ...like tween.duration() or *.delay() for duration and delay If an ease is set like a string it can be accessed in tween.vars as string, or I could iterate through all eases functions to find it... is there a way? Also is there a way to get gsap type after instancing...is the tween a "to"," from", "staggerTo"...? Thanks guys, Dario
  3. Nikhil009

    Scroll animation

    Hi, Is there any way to achieve this type of animation while scrolling. Im getting confused on the part where when if you scroll down new text-1 appear from bottom and current text-2 exit to up and reverse when scroll back up text-2 appears from top and text-1 exits bottom https://www.apple.com/nz/ipad-pro/ The above is part of the section whereby when you scroll up the content fades down and when you scroll down content fades up Similar to the above website, please kindly help me. Thank You
  4. Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.
  5. I've create a function which scrolls to the next anchor detecting the scroll direction (See below) const CONTAINER_STRING = '#main-container>main', CONTAINER = document.querySelector( CONTAINER_STRING ) let currentChild = 0 gsap.registerPlugin( ScrollToPlugin ) CONTAINER.addEventListener( 'wheel', ( { deltaY } ) => { if ( currentChild < CONTAINER.childElementCount - 1 && deltaY > 0 ) currentChild++ if ( currentChild > 0 && deltaY < 0 ) --currentChild gsap.to( CONTAINER, .5, { scrollTo: '#' + document.querySelector( `${CONTAINER_STRING}>:nth-child(${currentChild + 1})` ).id } ) }, { passive: true } ) My problem is i can't detect if gsap is currently tweening in my page. I've tried some tricks like extract the tween into a variable, but nothing works... 🤔 So how can i detect an interpolation in my page or detect if this specific tween is active ?
  6. GreenSock


    Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. However in GSAP 3, you no longer even need to reference TweenMax in your code (although you can because GSAP 3 honors the vast majority of legacy code). We strongly recommend migrating to GSAP 3's streamlined syntax. Quick links Getting started What's so special about GSAP? Documentation: Version 2 | Version 3 Showcase (examples) For convenience and loading efficiency, TweenMax version 2 and earlier included TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). Every bit of that functionality (plus a lot more) is in the GSAP 3 core which is almost half the size. Staggered animations GSAP makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. The old TweenMax stagger methods (from version 1 and 2): TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() aren't even necessary in GSAP 3 because a "stagger" special property can be added to ANY tween, like in the demo below: Additional Methods (only relevant for version 1 and 2) TweenMax inherits methods from TweenLite and it also has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax version 2 documentation.
  7. Hey, just wanted to share a small fun pin i made today morning with you guys.. Greensock rocks things, and make so easy and smooth the animation, so you can focus on he rest of the codes always, and let Gsap do what he can best. Btw. i read about the pipe() and gsap.quickSetter() which maybe would make things even more smooth here ? Do you think it would make a big different? Feel free to use this and or give feedback if you think things could be done better, smoother, cooler ! Thanks and Happy Tweening to you all !
  8. To implement a smooth scroll I used TweenLite.set{.. within my code. Serving the project works fine without any errors. But as soon as I try to build the project using ng build, it throws following error: How so? import { TweenLite } from 'gsap'; ... TweenLite.set(this.scroller.target, { rotation: 0.01, force3D: true }); "dependencies": { "@angular/animations": "~8.1.2", "@angular/common": "~8.1.2", "@angular/compiler": "~8.1.2", "@angular/core": "~8.1.2", "@angular/fire": "^5.2.3", "@angular/forms": "~8.1.2", "@angular/platform-browser": "~8.1.2", "@angular/platform-browser-dynamic": "~8.1.2", "@angular/router": "~8.1.2", "@types/gsap": "^1.20.2", "bootstrap": "^4.4.1", "firebase": "^7.6.1", "gsap": "^3.1.1", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" }
  9. Is there a way to obtain the current target via the onupdate callback within the fromTo tween in GSAP 3? In GSAP version 2, I was able to do this: this.timeline.staggerFromTo(this._shuffle(this.spheres), 4, { positionY: -1 }, { positionY: 1, repeat: -1, yoyo: true, ease: Power1.easeInOut, onUpdate: function onUpdate(a) { a.target.mesh.position.y = a.target.meshInitPosY + (a.target.positionY + 1) * 200; a.target.mesh.rotation.y = a.target.meshInitRotY + (a.target.positionY + 1) * 3; }, onUpdateParams: ["{self}"] }, '0.01'); However, in GSAP 3, all I get is an array of all of the targets and I need to get the actual target... this.timeline.fromTo(this._shuffle(this.spheres), { positionY: -1 }, { duration: 4, positionY: 1, repeat: -1, yoyo: true, ease: Power1.easeInOut, stagger: 0.01, onUpdate() { console.log(this, this._targets); // this returns all of the spheres //this.target.mesh.position.y = this.target.meshInitPosY + (this.target.positionY + 1) * 200; //this.target.mesh.rotation.y = this.target.meshInitRotY + (this.target.positionY + 1) * 3; } }); Am I missing something very obvious?
  10. I am currently working on a project- I have been using TweenJS. But I have fallen in love with versatility with GSAP. The only thing I am trying to figure out is if there is a similar function for GSAP that removes every instance of a tween like CreateJS createjs.Tween.removeAllTweens(); I have found myAnimation.kill(); but from what I can tell that is a per instance usage and I am looking for more of an overall function when I go to reset that would remove all tweens.
  11. Hi. I'm starting to use this incredible code to have some ads in my page. The issue I'm having is that some banners are located in the middle of the page, so when the user get to that part the animation has already ended. To fix this I'd like to know: - how to start the animation when the <div> section of the banner becomes visible. - If is possible to loop a serie of tweens without timelinelite. Thanks!
  12. Hi Guys, I stumbled on this post http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/ and implement the script there but not the result i wanted. Here is the script that $(function(){ var $window = $(window); //Window object var scrollTime = 0.3; //Scroll time var scrollDistance = 50; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html autoKill: true, overwrite: 5 }); }); How to achieve something like this smooth page scroll on this page - https://www.shift-capital.com/about? Please help.
  13. GreenSock


    Note: TimelineMax has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineMax). We highly recommend using the gsap.timeline() object instead. While GSAP 3 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. TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Its easy to make complex sequences repeat with TimelineMax and there are plenty of methods and events that give you complete access to all aspects of your animation as shown in the demo below. See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen. Interesting note: The animation in the banner above is a mere 11 lines of TimelineMax code. The next demo illustrates many of the things TimelineLite and TimelineMax handle with ease, such as the ability to: insert multiple tweens with overlapping start times into a timeline create randomized bezier tweens control the entire set of tweens with a basic UI slider repeat the animation any number of times dynamically adjust the speed at runtime. Notice how the play / pause buttons smoothly accelerate and deccelerate? See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen Be sure to check out TimelineLite for more info on all the capabilities TimelineMax inherits. The chart below gives a birds-eye look at the methods these tools provide. ul.chart { width:360px; float:left; margin-right:30px; } ul.chart li:nth-child(1){ font-weight:700; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TimelineLite and TimelineMax Methods add() addLabel() addPause() call() clear() delay() duration() eventCallback exportRoot() from() fromTo() getChildren() getLabelTime() getTweensOf() invalidate() isActive() kill() pause() paused() play() progress() remove() removeLabel() render() restart() resume() reverse() reversed() seek() set() shiftChildren() staggerFrom() staggerFromTo() staggerTo() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() useFrames() Methods exclusive to TimelineMax currentLabel() getActive() getLabelAfter() getLabelBefore() getlLabelsArray() repeat() repeatDelay() tweenFromTo() tweenTo() yoyo()
  14. GreenSock


    Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 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. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
  15. Hi there! I would like to add a scalar tween to a component in React using GSAP, the component is a functional component. I've whipped up a quick example of how i think that could be implemented in React using GSAP in the attached codepen. (Type in some number values into the input and watch GSAP tween the number below the input) It's a bit dirty as i need to add a global object to the window on the first mount of the component, so that GSAP has an object it can freely mutate without React resetting it on each render. Is there are better way of allowing GSAP to perform a scalar transition within React? Thanks for any help you can give!
  16. Hello everybody, i just had a little inconvenience occuring to me, when i wanted to animate a Sizmek Deluxe Banner (inside of their Template) using TimeLine Light and Tween Light. The code is read properly, console log is also working, no compiler errors and so on. just ... the animation wont play. I have contacted their support that is pretty good but unfortunately they also couldn't come up with a solution. Did anybody have a same experience or has an idea about how to fix that (i also tried not to use timeline but only TweenLite in its stead, but no response whatsoever)? Thanks in advance and best regards Felix 01_DeluxeBanner_2.0.0.zip
  17. Hi everyone! I'm trying to ease a progress bar filling animation but when it gets triggered it jumps straight to 100%. I want the animation to be triggered only once. I'm using react-scrollmagic and react-gsap. Progress bar is from Bulma framework. This is my code: <Controller> <Scene pin={false} reverse={false} indicators={true} triggerElement= "#trigger1" duration={0} > <Tween staggerFrom={{ value: 0, ease: 'Expo.easeOut' }} staggerTo={{ value: 100, ease: 'Expo.easeOut' }} stagger={0.15}> <div id="trigger1"></div> <progress className="progress is-primary" value="0" max="100"></progress> </Tween> </Scene> </Controller> The same tween without the scrollmagic scene instead works perfectly. Any ideas how to fix this?
  18. I am trying to do a simple tweening of increasing the radius of circles whenever the mouse gets clicked over an svg canvas. However, I am getting some jerking/choking on the tweening of the circles, and can't debug it why. This problem only happens when I try to create another circle, before the ones that are currently being animated finishes. Any help is greatly appreciated Main function code is the following: createCircle(evt) { const { clientX: x, clientY: y } = evt const id = `circle-${++this.lastCircleId}` this.circles.push({ x, y, id }) Vue.nextTick(() => { TweenLite.to(`#${id}`, 1, { attr: { r: 50 }, onComplete: () => { this.circles = this.circles.filter(circle => circle.id !== id) }, }) }) }, CodeSandbox example: https://codesandbox.io/s/vue-template-j9my3?fontsize=14 P.S. Sorry I posted a CodeSandbox example instead of CodePen, but couldn't really get the CodePen to work with vue template syntax.
  19. Did you know you can tween a tween? What does that even mean? Well, tweens (and timelines) are JavaScript objects that have their own getter-setter methods that allow you to either get or set values. If you make a tween or timeline the target of a tween you can then tween its progress() and timeScale() just like you would the opacity of a DOM element! The video below explains how this works and also shows you how to tween getter setter methods in your own JavaScript objects. Watch the video Demo 1: Tween progress() See the Pen Tween a tween (video) by GreenSock (@GreenSock) on CodePen. Demo 2: Tween timeScale() See the Pen Tween timeScale() of a Timeline by GreenSock (@GreenSock) on CodePen.
  20. james.davies


    Hi, Before I start, my code is written in TypeScript which compiles into JS. I have managed to get a yoyo animation to work as expected: public dab(): void { TweenMax.to(sprite.scale, 0.5, { x: 1.5, y: -1.5, ease: Power2.easeOut, yoyo: true, repeat: 1, repeatDelay: 0.1, onReverseComplete: this.handleYoyoComplete(), onReverseCompleteScope: this // onRepeatComplete: this.handleYoyoComplete, // onRepeatCompleteScope: this }) } protected handleYoyoComplete(): void { console.log("YOYO COMPLETE!"); } However, the method 'handleYoyoComplete()' gets called when the sprite is fully stretched out, before the yoyo starts but after the initial tween. I've tried onComplete, onReverseComplete, and onRepeatComplete. I have tried these all with and without the parenthesis (i.e. onReverseComplete: this.handleYoyoComplete() and onReverseComplete: this.handleYoyoComplete. Ultimately, is there a way of calling a method when the yoyo is fully complete? Thanks for reading, all help will be most appreciated.
  21. Hi! If I use multiple times without a variable reference //var myVar = TweenLite.delayedCall(); TweenLite.delayedCall(); If I do not call the .kill(), it will increase my memory? Or the delayedCall() have an onComplete() Event to be able to kill() after the calling.? I use the delayedCall() in a loop multiple times with different parameters... Thanks a lot.
  22. Hello, I have a problem with my first ScrollMagic Animation. I would like to fade in the boxes on scrolling down. This works fine except for the first time. When I scroll down for the first time the values like opacity don't "tween", they switch directly from 0 to 1. After that I can scroll up- and down with a working animation. It's like some kind of setting is missing. Do you have an idea what exactly is missing? This is my codepen: Thanks, Becca
  23. I'm trying get the white circle to tween to the center of this green square after it has been dragged and dropped onto it. Can't quite seem to get it going - feels like something I should know at this point.
  24. Hello! I need to Tween a number from 0 to 53,5. Is this possible with GSAP? I-m trying and i'm having problems to count decimal numbers. var obj5 = {value:0}, element5 = document.getElementById("cantidadMujeres"); TweenMax.to(obj5, 1.4, {value:"53,5", ease:Linear.easeNone, onUpdate:function() { element5.innerHTML = obj5.value;}}); This is my code, the problem is that the counting number has like ten or eleven digits when init. And, if i add "roundProps:"value" " the decimal digit dont count. The is some solution to this? Thanks
  25. Problem I'm noticing some very strange behavior when I'm updating a timeline's children tween durations. This is problematic for instances where I need to set the duration of the tween after initialization. e.g. an audio clip needs to download before knowing what the desired duration is. Observations The codepen demonstrates this. I construct 10 tweens at 0.2 duration each to a timeline (2s total). When I update each of the tweens' durations to 0.4, several unexpected things are observed: 1. Parent timeline only goes to 2.2 2. The tweens become "choppy" with overlap. It appears that only the last tween expands the timeline, but an interval of 0.2 is still placed between each tween. How can I correct this after updating the duration? Thanks!