Jump to content
GreenSock

Search the Community

Showing results for 'overwrite'.

  • 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. Actually it looks like it doesn't like interrupting the tween fired in the leave event. I can't use xTo for that because it has a dynamic ease applied. I wonder why it doesn't overwrite it.
  2. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. If I were you I'd approach this with single tweens per box and overwrite:true or auto. Maybe just focus on trying to swop one box between two different directions without scrollTrigger, then add some more boxes, then add in a ScrollTriggers with some callbacks and swop the direction over in the callbacks. Timelines are pre-calculated and a little less flexible for this sort of thing whereas tweens can be a bit more dynamic. Hope this helps a bit!
  3. Here's how I'd simplify it: https://codepen.io/GreenSock/pen/ExEZxOz?editors=0010 document.addEventListener("keyup", function(e) { let x, y; if (e.keyCode == 37) { // left arrow x = 100; } else if (e.keyCode == 38) { // up arrow y = 100; } else if (e.keyCode == 39) { // right arrow x = -100; } else if (e.keyCode == 40) { // down arrow y = -100; } if (x || y) { // if anything changed... let vars = {overwrite: true}; if (x) { vars.x = gsap.utils.clamp(bigDraggable.minX, bigDraggable.maxX, gsap.getProperty(bigImage, "x") + x); } else { vars.y = gsap.utils.clamp(bigDraggable.minY, bigDraggable.maxY, gsap.getProperty(bigImage, "y") + y); } gsap.to(bigImage, vars); e.preventDefault(); } }); Does that help?
  4. Hey GSAP, first: you are awesome, thank you for these supercool libaries. We want to try out the new ScrollSmoother an got stuck on the following problem: We have a transform based animation with a scrollTrigger: let tl = gsap.timeline({ scrollTrigger:{ trigger: card, start: "top top", end: "bottom top", pinSpacing: false, pin: true, scrub: true, markers: false, }, defaults: { overwrite: "auto"} }); tl.fromTo(cardContent, {scale:1, opacity:1}, {scale: 0.8, opacity: 0.2}); tl.to(cardContent, {opacity:0}); To avoid conflicts with the transform values in the parent container animation (like "jumping" elements) , we use clearProps: true on the parent containers animation. This works like a charm, BUT: with using ScrollSmoother, the same effect of "jumping" elements ist back, as ScrollSmoother is based on transforms. I'm happy for any advice on how to deal with that. Thanks
  5. Hi there! I have an issue using gsap. I'm using chakra and next on my project and i dont know why, but when I put the gsap to work it just make my svg weird, It look to overwrite something that should not happen. If you look at this little example and comment the line of useEffect you'll see what I mean. Hopeful for help, thanks https://codesandbox.io/s/portfolio-app-forked-20tos8?file=/components/projects.js
  6. You can't animate "x" and "y" properties on every element to multiple places at the same time You could, however, wrap each element in another <div> and have the pointer parallax animate that one, and the motionPath can animate the child. The way you're handling the parallax pointermove thing is extremely inefficient. On every pointermove event (which can fire over 60 times per second) you're creating a whole new tween for every single element, and you're also calling .getBoundingClientRect() twice. Since you didn't set overwrite: true or overwrite: "auto", it also means you're creating a bunch of conflicting tweens that are fighting with each other for control of the same properties of the same targets. You're also getting the offsetTop and offsetLeft on every element on every pointermove event too which is expensive. You're needlessly duplicating the calculation of speed too (speedX and speedY are identical). You could pre-calculate a lot of the values, store them in a data object along with a tween for each element that you then invalidate() and restart() after updating the x/y destination values, sorta like this: const data = elements.map(el => { return { left: el.offsetLeft, top: el.offsetTop, speed: 100 - el.dataset.size, tween: gsap.to(el, {x: "+=0", y: "+=0", ease: "expo", duration: 2, paused: true}) }; }); const onMouseMove = (event) => { let bounds = wrapper.getBoundingClientRect(), pageX = event.pageX - bounds.width * 0.5, pageY = event.pageY - bounds.height * 0.5; data.forEach(d => { d.tween.vars.x = -((d.left + pageX * d.speed) * 0.005) / 2; d.tween.vars.y = -(d.top + pageY * d.speed) * 0.005; d.tween.invalidate().restart(); }); }; The upcoming release is going to have a very cool feature that'll make this even easier and faster, so stay tuned for that Side note: GSAP has a gsap.utils.random() method that you can tap into instead of making your own. I'm not even sure you need to use MotionPathPlugin - are you just trying to make it go in a circular path? If so, there may be easier algorithms. Like put it in a wrapper <div>, offset the transformOrigin and then rotate it while rotating the inner element in the opposite direction. Just an idea. Have fun!
  7. Thank You Cassie and Jack, there's of course some problem on the logic I'm pursuing, I know that the height of the page plays a key role on the animation I'm working on so I ask u this: if you were to make this animation from that I tried to explain the beginning, where would you start from? I don't want to bang my head unnecessarily If u think there's a better way to approach this animation I'm all ears The only caveat is that the two divs must be 100vh, always, at least when they're visible. (I tried with observer, it seems more fitting but I'm having similar problems with the changing page height Observer.create({ target: window, type: "wheel,touch,scroll", onUp: () => { move('100vh') }, onDown: () => { move(0) } }); function move(value) { gsap.to("#bottom", { "top": value, duration: 1.3, ease: Quart.easeInOut, // overwrite:true }) } )
  8. Nope, that's fine because GSAP sets inline styles for maximum specificity. The only other thing I can think of is if maybe you accidentally killed the opacity animation? Like if after creating it, you did a DIFFERENT animation on that same element and set overwrite: true? I doubt it, but I'm just brainstorming. I would recommend setting an onUpdate on that particular tween so you know when it's being updated, and then open up Dev Tools and scroll to where it should be animating opacity and look in the console to see if it's firing. .to("#header-copy", { onUpdate: () => console.log("updated!"), opacity: 1, ease: "power1.inOut", duration: 30, }, 70); And is the opacity sticking at 0 or is it at 1 the whole time? I wonder if maybe it was not 0 when the tween rendered the first time, thus it's animating from 1 to 1 (no change).
  9. Good afternoon, i have a very long page that utilizes scrolltriggers in several modules. one of the modules on my pages has a horizontal scroll with a few slides and within each slide is an animation. everything works pretty well except we have found during beta testing that the user can scroll and very quickly through and past the horizontal "slider" into the regular vertical page. overall the horizontal portion doesnt "feel" great and breaks the user experience. we've tried doing "snap" points- but they snapped in odd ways that didnt feel natural. i've googled this, searched the forums, tried on my own but nothing is working or is overly complex to the point of getting overwhelmed at the complexity of some of these other "snap" solutions. what im wondering is is there a way to add a bit of a "click" feel as each slide finishes. or some sort of anticipation and "pause" after each slide so the user doesnt whip trough the horizontal scroll? i''d be very thankful for any assistance i can get on this, as it's become quite frustrating. const tl2 = gsap.timeline({ scrollTrigger: { trigger: '.module_3_wrapper', start: "center center", end: "center center", pin: '.module_3_wrapper', scrub: 1, pinSpacing: true, } }); let container = document.querySelector('.module_3'); let sections = gsap.utils.toArray(".module_3 .slides"); let scrollTween = gsap.to(sections, { x: () => -(container.scrollWidth - document.querySelector('.module_3_wrapper').clientWidth) + "px", ease: "none", duration: .1, scrollTrigger: { trigger: ".module_3_wrapper", pin: true, start: "center center", scrub: true, invalidateOnRefresh: true, end: `+=${container.offsetWidth}`, } }); I found someone did something like this with a nest scrolltrigger, but i can't figure out how to merge what i have and what this does. but it has the exact effect im looking for. where it nicely locks between slides. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. ScrollTrigger.create({ start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });
  10. Are you maybe looking for pinspacing:false Also - If you wanted to go with this type of a solution you'd need to tweak the calculation of the marker placement to be based around the slide container itself rather than the window. Something vaguely like this? This is just a guess so apologies if it doesn't work, I figure most things out by trial and error. But basically you'll want to be adding a little more offset to the start marker on each one. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. console.log('maybe?', myslides.offsetWidth / (slides.length - 0) * i) ScrollTrigger.create({ trigger: myslides, markers: true, start: () => `top+=${myslides.offsetWidth / (slides.length - 0) * i} top`, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });
  11. Hi Cassie, thank you so much for responding. i think what needs to happen it's basically putting each slide in a scrolltrigger and giving it a pin (stays on screen for a second before releasing to the next slide) effect. right now the continuous scroll of the horizontal slider doesnt feel very good. and snapping doesnt either. But i found a post buried here, that i can no longer find that had a solution that was exactly what i needed. and it's the below code. my only problem is i couldnt figure out how to integrate into my page flow like you see in my codepen. because the below code acts as if the horizontal slider is the only main element on the page. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. ScrollTrigger.create({ start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });
  12. Can you explain what you mean? What are you wishing for that immediateRender doesn't provide? And if you just want to get something to render at a new playhead position, you can easily do that by setting the progress() or time(). Yes, that's very intentional and it's also easy to fix. We explain it here: In the old (v2 and earlier) version, the default overwrite mode was "auto". Now it is false because: It's faster (performance) because in the vast majority of cases people aren't creating conflicting tweens, so we can skip the processing involved in hunting down conflicts. It confused people in some cases because they didn't even know overwriting was a thing. The new behavior in v3 ensures that people opt-in to overwriting so that it never catches them off-guard. The fix: either set overwrite: "auto" (or true) in the new/overwriting tweens or you can just set the default mode for all animations to one of those like: gsap.defaults({overwrite: "auto"}); Does that clear things up?
  13. See if this gets you going in the right direction. I just used standalone ScrollTrigger to toggle the nav items. The back ease looks a little bit weird in reverse, so if you wanted a different ease when hiding the items, you should just create a new animation in that if/else. if (self.isActive) { gsap.to(boxes, { overwrite: true, ease: "back.out", // or whatever exit ease you want y: -64, opacity: 0, stagger: { amount: 0.25 } }); } else { gsap.to(boxes, { overwrite: true, ease: "back.out", y: 0, opacity: 1, stagger: { amount: 0.25 } }); } Multiple GSAP Animations in React (codepen.io)
  14. Another option: use an onToggle that checks the velocity and if it's adequately fast, it just forces the animation to its end with a reusable helper function like this: function finishOnFastLeave(self) { !self.isActive && Math.abs(self.getVelocity()) > 2500 && self.animation.progress(self.progress === 1 ? 1 : 0).pause(); } Usage: onToggle: finishOnFastLeave https://codepen.io/GreenSock/pen/eYWbZxN?editors=0010 No, overwrite logic runs ONCE for a tween (for performance reasons): overwrite: true - runs immediately when the animation is created - it finds all other tweens of the same target(s) and kills them in their entirety. overwrite: "auto" - runs the first time the tween renders; it isolates and kills only the conflicting individual properties in other tweens that are active at that moment. If you invalidate() a tween, then the first time it renders after that, it'll re-run the overwrite: "auto" routine at that point too. Here's another thread where we discussed several options for handling fast scrolling and overlapping scroll-driven animations (skip to the final few pots):
  15. GSAP Helper

    Animated cursor

    We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting and logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You need to adjust your value on scroll. You could do that in a "scroll" event handler and look at the deltaY of the event perhaps. I would also strongly recommend using the gsap.quickTo() for your tweens that are constantly getting recreated on each mousemove event. The way you've got them set up now, you're creating new instances every time and they're all conflicting with each other because you didn't set overwrite: true (or "auto"). That's bad for performance. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question, we'd be happy to try to help with that.
  16. I didn't totally follow your explanation there, @mjray, but my guess is that you were creating conflicting tweens. Did you try simply setting overwrite: true or overwrite: "auto" on your animation? Also, did you know about this method?: https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll() It's relatively new.
  17. That code/logic looks very strange to me. I suspect @SteveS is correct, that you're overcomplicating and over-engineering things. You've got an onUpdate that's handling things differently based on the progress (odd - it's probably much cleaner to just use two ScrollTriggers) and then if it's more than 25%, you're calling moveAnimate() on EVERY update, over and over again which is creating a new tween each time and there's no overwrite set, so you're creating a ton of conflicting tweens that are all trying to control the same properties of the same elements. That's definitely a problem. The same goes for your xPercent tween in there - you're creating a new one over and over again. If you still need some help, I'd strongly recommend just simplifying things using a few colored <div> elements in CodePen and then post back here with your GSAP-specific question and we'd be happy to take a peek.
  18. Welcome to the forums, @Sooova. Would you please provide just a minimal demo that more clearly demonstrates the issue? I'm pretty lost when I look at that demo, especially with all the missing images. You can just use simple colored <div> elements instead maybe. It shouldn't take 100+ lines of code to show the issue. There are a lot of setTimeouts/Promises and delays and stacked up strings of logic - perhaps you could just eliminate any randomization, isolate a single state change of one or two elements, and only focus on that in your demo(?) And please keep in mind that these forums aren't really for general troubleshooting of logic issues, but we're happy to answer any GSAP/Flip questions. A few quick comments: I assume this was a mistake: // BAD onComplete: isComplete(), // <- executes immediately and assigns whatever isComplete returns to the onComplete. // GOOD onComplete: isComplete, And this: // BAD overwrite: "false", // GOOD overwrite: false, You can use gsap.utils.random() instead of your getRandomInt() function.
  19. That's because you're creating a bunch of conflicting tweens that are fighting with each other for control on every mousemove event. Just set overwrite: true on your line tweens and that fixes it.
  20. Actually overwrite:auto is kinda easy than what akapowl but I think it necessarry to do that hahaaha..Thanks @akapowl @GreenSock
  21. 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. Note: the ActionScript version of the GreenSock Animation Platform still works great and you're welcome to use it, but it is no longer officially supported. Our customer base made it very clear that JavaScript was the future of web-based dynamic animation, and we have been focused there for years. Please see the JavaScript Getting Started Guide for more information. Quick links Introduction Installing the code Importing Basic tweening with TweenLite Special properties Plugins Overwriting other tweens Controling tweens Which class do I use? TweenLite? TweenMax? TweenNano? Building a sequence with TimelineLite Need help? Introduction Animating with code may seem intimidating at first, but don't worry - you'll get the hang of it quickly. The GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. For now, we'll focus on getting you up and running with the core engine, TweenLite, and then we'll discuss if and when you might want to put the other tools to work for you (like TweenMax, TimelineLite, TimelineMax, etc.). Installing the code Go to your account dashboard page and click the AS2 or AS3 link in the downloads area to download a zip file containing the entire GreenSock Animation Platform in the language you specified. Unzip the file and you'll see a folder containing several swfs, documentation, and a folder named "com" - that's the critical one. Take that "com" folder with all its contents and drop it into the same folder as your FLA file (or if you're an advanced user, set up a classpath to wherever you want). Make sure that you leave the directory structure inside the "com" folder in-tact; it has a "greensock" folder with several ActionScript files inside, along with a few subdirectories. You can throw away the swfs from the zip download and the documentation, etc. if you want. The only critical files are inside that "com" folder. When you publish your swf, Flash looks for that "com" folder, reads the code from inside of it, and embeds it into your published swf. You do NOT need to put the "com" folder on your web server. Once the swf is created, it is completely independent and has no dependencies on the class files because they have been embedded into the compressed swf. Your FLA file has the dependencies, not the swf. There's a great ActiveTuts article here about using 3rd party tools in your Flash projects and it covers some of the more advanced installation/configuration options. Importing In order for Flash to understand what you mean when you type "TweenLite" (or "TweenMax" or any of the GreenSock classes), you must tell it where to find the class file(s). That's what an import statement does. It acts as a pointer that tells Flash where it should look. After all, there could be a completely different "TweenLite" class that another author created, and you need a way to tell Flash which one you're talking about. Typically you put your import statement at the top of the frame or the custom class you created. And, yes, just like any class, you must add the import statement to all frames or classes that contain code referencing it. This does not add extra kb to your file every time you import it. Flash is smart enough to embed it once and all the import statements just act as a "pointer" to the embedded class. To import just the TweenLite class, do: import com.greensock.TweenLite; To import TweenLite and TweenMax, do: import com.greensock.TweenLite; import com.greensock.TweenMax; To import all of the classes in the com.greensock package (don't worry, Flash will only embed the classes that you actually use in your code), do: import com.greensock.*; You'll probably also want to import the easing classes as well (we'll talk more about them later), so this is code that you should get used to putting at the top of your frames or class files because it covers almost everything you'd need and it's shorter than typing out each class every time: import com.greensock.*; import com.greensock.easing.*; Basic tweening with TweenLite Each tween you create needs a target (the object you want to tween), the duration of the tween (typically described in seconds), and the properties that you want to tween, along with their corresponding end values. Let's say, for example, you have a MovieClip named "mc" and you'd like to tween its x property to a value of 100 (sliding it across the screen) over the course of 1.5 seconds. You can use TweenLite's to() method to do it: TweenLite.to(mc, 1.5, {x:100}); The first parameter is the target, the second is the duration, and the third is an object with one or more properties that correspond to your target object's properties. Since it's a to() tween, you're telling TweenLite to tween from whatever the x property happens to be at the time the tween begins (now in this case), to a value of 100. If you want to also tween the y property to 200 and the alpha property to 0.5, you'd do: TweenLite.to(mc, 1.5, {x:100, y:200, alpha:0.5}); There is no limit to the number of properties you can tween. And TweenLite can tween any numeric property of any object, not just a predetermined list of DisplayObject/MovieClip properties. Since there's an AS2 version as well, you can simply change the property names to reflect their AS2 equivalents, like: TweenLite.to(mc, 1.5, {_x:100, _y:200, _alpha:50}); Here's an interactive demo that allows you to build tweens yourself and see the corresponding code at the bottom: There is also a very useful from() method that allows you to define the starting values in the tween and go backwards. So the current values will be used as the end values, and the ones you define in the tween will be the starting values. This makes it easy to, for example, set things up on the stage where you'd like the objects to end, and then animate them into place. Let's say your mc object's y property is at 200 and alpha is at 1, and you'd like to have it "drop" into place from above while fading in over the course of 1.5 seconds, you could do: TweenLite.from(mc, 1.5, {y:0, alpha:0}); If you prefer a more object-oriented approach and/or would like to store references to your tweens in variables so that you can control them later (for example, pause(), resume(), reverse(), restart()), you can create a tween like this (which is identical to a to() tween): var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:200, alpha:0.5}); Special properties A special property is a reserved keyword that TweenLite recognizes and handles differently than it would a normal property. One example is delay which allows you to delay a tween from starting until a certain number of seconds has elapsed. For example, this tween will wait 2 seconds before beginning: TweenLite.to(mc, 1, {x:100, delay:2}); TweenLite recognizes several special properties that are quite useful, like onComplete, ease, overwrite, paused, useFrames, immediateRender, onStart, onUpdate, onCompleteParams, and more. Please read the full documentation for details. Two of the most common special properties you'll likely use are ease and onComplete. To alter the rate of change during a tween, you can choose from many different easing equations from either the com.greensock.easing package or Flash's own easing classes or Robert Penner's. The interactive demo above allows you to chose different equations and see how they affect the tween. The onComplete special property gives you a way to call any function when the tween completes, making it simple to create a chain of events. Here is a tween that uses the Elastic.easeOut ease, delays its start time by 0.5 seconds, and calls myFunction() when it completes: TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction}); function myFunction():void { trace("tween finished"); } Plugins Think of plugins like special properties that are dynamically added to TweenLite (and/or TweenMax), giving it extra abilities that it doesn't normally have by default. Each plugin is associated with a property name and it takes responsibility for handling that property. For example, the FrameLabelPlugin is associated with the frameLabel property name so if it is activated it will intercept the frameLabel property in the following tween and manage it uniquely: TweenLite.to(mc, 1, {frameLabel:"myLabel"}); If the FrameLabelPlugin wasn't activated, TweenLite would act as though you were trying to literally tween the mc.frameLabel property (and there is no such thing). Activating a plugin requires a single line of code and you only need to do it once in your application, so it's pretty easy. Simply pass an Array containing the names of all the plugins you'd like to activate to the TweenPlugin.activate() method, like this: import com.greensock.plugins.*; TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]); To make it even easier, I created the Plugin Explorer which writes the code for you. All you need to do is select the plugins and copy/paste the code from the bottom of the tool. It also displays interactive examples of each plugin and the associated code so that it's easy to see the correct syntax. TweenLite does not activate any plugins by default, but TweenMax does. When a plugin is activated, it affects both TweenLite and TweenMax. Overwriting other tweens An often overlooked aspect of tweening is how (and if and when) tweens overwrite other tweens of the same object. For example, let's say you have a button with ROLL_OVER and ROLL_OUT handlers that tween its alpha higher on ROLL_OVER and lower on ROLL_OUT. To further complicate things, let's say the ROLL_OVER tween lasts 2 seconds and the ROLL_OUT tween lasts 1 second. What should happen if the user rolls over/out/over/out quickly? See the problem? If tweens are allowed to run without any kind of overwriting, they'll build up and fight with each other (one trying to tween the alpha higher, and the other lower). In this example, when the user rolls over, a 2-second tween would start increasing the alpha to 1, but if the user rolled off 0.2 seconds later, another tween would begin, causing the alpha to decrease. When that tween finishes 1 second later, the ROLL_OVER tween is still going (since it had a duration of 2 seconds), so the alpha would suddenly jump up and finish off at a value of 1 even though the user rolled out! Don't worry. We've got you covered. By default, whenever a TweenLite instance renders for the first time (after any delay), it analyzes all other active tweens of the same target and checks for individual overlapping properties. If it finds any, it kills the offending overlaps (again, only the individual properties). This overwrite mode is called "auto" and it is typically the most intuitive. However, there may be times when you want the new tween to kill all other tweens of the same object regardless of their start times or overlapping properties. That is what the "all" overwrite mode is for. And to skip overwriting altogether, you can define an overwrite mode of "none". There are several other modes to choose from too, so check out the full docs for details. You define an overwrite mode with the overwrite special property like this: //overwrites all tweens of mc immediately TweenLite.to(mc, 1, {x:50, overwrite:"all"}); //doesn't overwrite anything (allows conflicts) TweenLite.to(mc, 1, {x:50, overwrite:"none"}); //overwrites only individual overlapping properties on concurrent tweens of mcmyElement (this is the default, so you typically don't need to specify any overwrite in this scenario) TweenLite.to(mc, 1, {x:50, overwrite:"auto"}); //set the default overwrite mode to "all" instead of "auto" TweenLite.defaultOverwrite = "all"; Of course you can manually kill all the tweens of a particular object using the TweenLite.killTweensOf() method, but the nice thing about defining overwrite modes is that the overwriting doesn't kick in until it's necessary (when the tween renders for the first time) which is essential when working with complex sequences. Controlling tweens Once a tween is created, you may want to pause(), resume(), reverse(), play(), restart(), invalidate(), or kill() it. It's pretty easy, actually: var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100}); //pause myTween.pause(); //resume (honors direction - reversed or not) myTween.resume(); //reverse (always goes back towards the beginning) myTween.reverse(); //play() (always goes forwards) myTween.play(); //restart myTween.restart(); //invalidate (clears out any starting values that were recorded and forces the tween to re-initialize on the next render) myTween.invalidate(); //kill the tween immediately myTween.kill(); //kill all tweens of the mc object TweenLite.killTweensOf(mc); TweenMax has some additional static methods for getting all the tweens of a particular object, pausing them all, resuming, getting tweens of objects that are children of a certain DisplayObject, and more (see documentation for details). Which class do I use? TweenLite? TweenMax? TweenNano? If you can afford the file size (roughly 23kb with the default plugins), just use TweenMax. It is the most full-featured tweening engine and it automatically handles activating a bunch of useful plugins by default, so it makes things very easy. If, however, you're concerned about file size and want precise control over which plugins get activated, TweenLite is for you. It's amazingly capable for its size and has all the essentials crammed into about 8kb. It is really the core of the whole platform and has become incredibly popular. If you simply must shave off another 6k and are willing to sacrifice quite a few features (most notably lack of support for plugins and insertion into TimelineLite/Max instances), use the ridiculously small 2k TweenNano. I would strongly recommend sticking with TweenLite or TweenMax if you can, though, because they offer much more flexibility than TweenNano. All of the engines use exactly the same syntax, so these lines will produce identical results: TweenNano.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); TweenLite.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); TweenMax.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); Keep in mind that TweenMax extends TweenLite, so it does everything TweenLite does, plus more. And the plugins that are activated by default in TweenMax can also be activated in TweenLite (the only exception being roundProps), so with a couple of extra lines of code at the start of your application, TweenLite can have many of the same capabilities as TweenMax (activating plugins increases the file size beyond 4.7k obviously). There are several features that are only available in TweenMax, though, so check the documentation. Sequencing and grouping tweens with TimelineLite Unlike most other scripted animation tools, sequencing in GSAP is much more flexible than building a queue of tweens that run one-after-the-other. You have complete control over the relative timing of each tween - they can overlap as much as you want. And you can control entire sequences as a whole, reverse smoothly anytime, jump to any point, adjust the timeScale(), etc. and everything renders in the proper order. Watch this video for a visual demo showing how TimelineLite can save you a lot of time. Although the video uses the HTML5/JavaScript version of GSAP, the same concepts apply to ActionScript. Of course you could sequence tweens by using the delay special property on all your tweens, but that can get complicated when you build a long sequence and then later want to change the timing of something early in the sequence (you'd have to adjust all the delay values in tweens after that). Plus it would be a pain to control the whole sequence, like to pause() or resume() or reverse() the group on-the-fly. Sequencing is much easier with TimelineLite and its big brother, TimelineMax. Let's jump into some sample code: //create a TimelineLite instance var tl = new TimelineLite(); //append a to() tween tl.to(mc, 1, {x:50}); //add another sequenced tween (by default, tweens are added to the end of the timeline which makes sequencing simple) tl.to(mc, 1, {height:300p, ease:Elastic.easeOut}); //offset the next tween by 0.75 seconds so there's a gap between the end of the previous tween and this new one tl.to(mc, 1, {alpha:0.5}, "+=0.75"); //overlap the next tween with the previous one by 0.5 seconds (notice the negative offset at the end) tl.to(mc, 1, {rotation:360}, "-=0.5"); //animate 3 MovieClips (mc1, mc2, and mc3) to a rotation of 60 degrees, and stagger their start times by 0.2 seconds tl.staggerTo([mc1, mc2, mc3], 1, {rotation:60}, 0.2); //then call myFunction() tl.call(myFunction); //now we can control the entire sequence with the standard methods like these: tl.pause(); tl.resume(); tl.restart(); tl.reverse(); tl.play(); //jump to exactly 2.5 seconds into the animation tl.seek(2.5); //slow down playback to 10% of the normal speed tl.timeScale(0.1); //add a label named "myLabel" at exactly 3 seconds: tl.add("myLabel", 3); //add a tween that starts at "myLabel" tl.add( TweenLite.to(mc, 1, {scale:0.5}), "myLabel"); //jump to "myLabel" and play from there: tl.play("myLabel"); Think of a timeline (as in a TimelineLite or TimelineMax instance) like a collection of tweens that are positioned at specific places on that timeline. It controls their playback. Timelines can be nested inside other timelines as deeply as you want. This is a very powerful concept because it allows you to control entire sequences in a modular way. Imagine 100 characters individually animating into place in a staggered fashion (100 tweens). They could all be grouped into a TimelineLite instance and then controled as a whole (using common methods like pause(), resume(), reverse(), restart(), etc.). In fact, you could create functions that return animations wrapped in a TimelineLite so that you can easily build a larger, more complex animation in a modular way. A central concept to grasp is that every tween is inserted into a timeline. By default, it's the root timeline inside the engine. When a timeline is playing, its virtual playhead advances. If you reverse() a timeline, the playhead travels in the opposite direction back towards its beginning. As the timeline's playhead encounters tweens, it plays them accordingly. For example, if the playhead is positioned halfway through a tween, that tween will render as though it is 50% finished. If the timeline's timeScale() is set to 0.5, that would cause the playhead to travel at half speed. Consequently, any tweens it encounters would also appear to progress at half speed. Once you get the hang of how timelines work, they can revolutionize your animation workflow. Just like tweens, timelines play immediately by default but you can pause them initially using pause() or by setting paused:true in the vars parameter of the constructor. There are quite a few methods available in the timeline classes that give you precise control, and we'd encourage you to look through the docs to see what's available. If you can think of something you'd like to do, chances are there's a way to do it. Just like the way TweenMax extends TweenLite, TimelineMax extends TimelineLite, using identical syntax and adding several useful (but non-essential) features like AS3 event dispatching, repeat(), repeatDelay(), getActive(), getLabelAfter(), getLabelBefore(), currentLabel(), and more. Please refer to the TimelineMax documentation for details. Here's an interactive demo of TimelineMax: Need help? Feel free to post your question on the forums. Keep in mind that you'll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.
  22. The main problem is that you keep creating a new tween every single time there's a mousemove event and also every time there's a mouseenter but you never set an overwrite nor do you kill() the old tween(s). So, for example, you create a repeating backgroundPosition tween the first time the user's mouse enters and then the next time you create a new one but the OLD one is continuing to play and repeat over and over. That tween is affecting the backgroundPosition as well (you're creating a bunch of conflicting tweens). You could just set overwrite: "auto" on your tween(s) but I'd actually recommend simply reusing a single tween instance rather than creating new ones over and over and over again. That'll perform better. https://codepen.io/GreenSock/pen/podNjwp?editors=0010 You had a few typos in there too. Is that CodePen more like what you wanted?
  23. Sure, if you're just staggering them (same animation for all, just offset), you can simply use a "stagger" on a single tween. No need for a timeline. But yes, if you need to animate various things differently, you can absolutely use a timeline that you create in the callback(s). Just make sure you set overwrite: true (or "auto") on the tweens to ensure you don't create conflicts. onEnter: () => { let tl = gsap.timeline({defaults: {overwrite: true}}); tl.to(...).to(...)... } If you're still struggling, please provide a minimal demo and we'd be happy to take a peek. Good luck!
  24. Hi, I tried to figure it out on my own but I'm stuck. The first two parts of my animation work how I want it to, but the last part doesnt. When i scroll down 50vh, I want the floating animation (rotatesletters) to stop and the shapes stop moving And then when I scroll back to the top of the screen, I want the floating animation (rotatesletters) to start again. I've tried: 1. overwrite: "auto", 2. rotatesletters.pause() 3. functions I've also rewritten the code four different ways I appreciate any help. Thank you
  25. The default of overwrite: false is the most CPU-friendly option...it assumes you're responsible with the way you create your animations (not creating conflicts). 2nd fastest is overwrite: true because that doesn't have to care about which properties - it just obliterates any active tweens of the same object. We don't plan on changing any of those overwrite options if that's what you're asking. It won't cause a conflict, no - the whole purpose is to avoid conflicts But I think it'd be rather strange to do physics animations with overwrite: "auto" but it's not wrong or anything. Frankly, you're not going to notice a performance difference unless you really push things hard and have hundreds/thousands of things initiating animations simultaneously. And remember, overwriting logic only runs ONCE for a tween (when it renders for the first time). It's not like it's constantly draining resources looking for things to overwrite. As you probably know, we put a lot of effort into making GSAP highly performant. I may be misunderstanding but no, I don't see any reason to use isTweening() in that scenario. Here's some very basic pseudo code: // this replaces your setTimeout() logic. Just use a delayedCall - remember, it's just a tween with an onComplete, so you can pause()/restart() it. let hideControlsDelay = gsap.delayedCall(1, hideControls).pause(); function onPointerEnter() { hideControlsDelay.pause(); // don't hide controls when the pointer is over them gsap.to(controls, {autoAlpha: 1, overwrite: true}); // animate controls in } function onPointerLeave() { hideControlsDelay.restart(true); } function hideControls() { gsap.to(controls, {autoAlpha: 0, overwrite: true}); // animate controls out } hitArea.addEventListener('mouseenter', onPointerEnter); hitArea.addEventListener('mouseleave', onPointerLeave); I guess I don't really understand why isTweening() would be helpful. Maybe I'm missing something. Anyway, does that help?
×