Search the Community
Showing results for 'overwrite'.
-
Active nav-item styling using both scrollTrigger and click
ZachSaucier replied to Sonya.Ninja's topic in GSAP
Hey Sonya and welcome to the GreenSock forums. You should use your developer tools console (F12) to check for errors. Opening it up for your pen I see "Uncaught TypeError: ALL_FUNCTIONS.sectionOne is not a function". I'm guessing those are additional animations that you took out for the sake of the demo (thanks for doing that). FYI we recommend using the GSAP 3 way of formatting. For more about that check the GSAP 3 migration guide. The main issue is that you're using an older version of ScrollTrigger that has a bug related to zero duration timelines with ScrollTriggers. Update the file to version 3.3.3 and it will animate some. But you'll still need to change your code a bit because you need a way to animate back to the previous section on reverse. I might do it by calling your method with the previous item - something like this: tl.call(ALL_FUNCTIONS.styleTheNav, [prevmenuitem]); - before you call the item that shows for that section. That way when you reverse it it'd call the previous one second. If you have overwrite: "auto" on those tweens, it should animate the way you want. I'd also recommend a toggleActions of toggleActions: "play none none reverse". I noticed that you tried to use the position parameter on non-timeline tweens. That won't work because the tweens have nothing to position them in regards to. Happy tweening. -
Hi, I'm getting many warnings in console while using gsap.from() with immediateRender: false on DOM elements (CSSPlugin). gsap.from(".box", { opacity: 0, y: 100, duration: 1, immediateRender: false }); warnings: "Invalid property" "duration" "set to" 0 "Missing plugin? gsap.registerPlugin()" "Invalid property" "repeat" "set to" 0 "Missing plugin? gsap.registerPlugin()" "Invalid property" "delay" "set to" 0 "Missing plugin? gsap.registerPlugin()" "Invalid property" "ease" "set to" 1 "Missing plugin? gsap.registerPlugin()" "Invalid property" "overwrite" "set to" false "Missing plugin? gsap.registerPlugin()" "Invalid property" "data" "set to" "isFromStart" "Missing plugin? gsap.registerPlugin()" "Invalid property" "lazy" "set to" false "Missing plugin? gsap.registerPlugin()" "Invalid property" "immediateRender" "set to" false "Missing plugin? gsap.registerPlugin()" "Invalid property" "stagger" "set to" 0 "Missing plugin? gsap.registerPlugin()" it started with version 3.3.0 -
If i use two timeline for one element, second timeline overwrite attributes Timeline on view: tl_inview .fromTo('.slide01 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}) .fromTo('.slide01 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "-=0.5") Timeline for chage slides: tl_slides .fromTo('.slide01 .box1', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'}) .fromTo('.slide01 .box2', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'}) .addLabel('start') .fromTo('.slide02 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start") .fromTo('.slide02 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start") On page load i have <div class="slide01"> <div class="box1" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div> <div class="box2" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div> </div> https://codepen.io/-greg-/pen/qBbqvPQ I want that tl_inview play only once (only if scroll from top)
-
Hey capa. You've got a lot of code for a pretty simple effect. I recommend rewriting your code to be more concise and understandable. Here's the outline of what I'd do: Make a function that receives an index as a parameter and fades in the appropriate image and makes the relevant dot more opaque while at the same time does the opposite to the currently active image and dot (perhaps using a stored index to know which one is currently active). Make sure that overwrite is set to "auto" or true for those tweens. Create a delayedCall that calls the function from 1 after a set period of time but make sure that you save a reference to the delayedCall. Modify the function from #1 to cancel and create a new delayedCall similar to #2 but based on the index after the given one. This is what you're not doing in your demo. Add click functions to the dots to call the function from #1. Simple
-
Hi together, i only wanted to know how it's possible to manipulate/skip a single stagger element, which was already defined on a whole stagger object. The thing is, i have to stagger objects inside a timeline. The stagger runs through around 14 objects, start to make them move and after they're in move the playhead is jumping directly to the fadein. Doing a single stagger which different times and props i'm not aware of. Most of the objects fadein to autoAlpha 1 but 1 one of them should be manipulated further later on and the single asset need to fade only to .25. So my question is how is the best solution to manipulate that property. I'm not sure at the moment how to change/overwrite a prop onStart, or to exclude a single dom object by class name instead of an array not:filter. This is a raw in between code by me, but maybe it gives an idea what i try to figure out. Thx Peter const contact_profile = '.hero-home-introduction__contact-profile'; const female_02 = '.hero-home-introduction__female-02'; let tl_home_introduction = gsap.timeline(); // Scene 1 - Show conversation const tl_scene_1 = gsap.timeline({ id: "Scene 1"}) tl_scene_1.to(contact_profile, { duration: 5, y: '-=20', stagger: { each: .5, from: 'random', delay: -.5, repeat: -1, yoyo: true }, ease: "power1.inOut", delay: .2 }); tl_scene_1.to(contact_profile, { duration: 2, autoAlpha: 1, stagger: { each: .2, from: 'random', onStart() { let className = this.targets()[0].getAttribute('class'); if (className === 'hero-home-introduction__contact-profile hero-home-introduction__female-02') { // Overwrite here // Or } } } },14); // tl_scene_1.to(female_02, { duration: 2, autoAlpha: .25},15); tl_home_introduction.add(tl_scene_1); tl_home_introduction.play(14);
-
Hello, I have setup a react codesandbox, and the same problem happens https://codesandbox.io/s/91ct7 to see really the problem go to the full screen url https://91ct7.csb.app/ as sometimes it works in the sandbox until you reload the browser It doesn't happen in basic html https://codepen.io/alexadark/pen/QWyGNZj it also happens on other animations onEnter, for ex here https://cadell.netlify.app/more I did a batch animation on the 3 boxes in the middle , taking example here https://codepen.io/GreenSock/pen/zYrxpmb like that useEffect(() => { if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals("ScrollTrigger", ScrollTrigger) } gsap.defaults({ ease: "power3" }) gsap.set(".confWrap", { y: 50 }) ScrollTrigger.batch(".confWrap", { onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15 }, overwrite: true, }), onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }), onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 100, overwrite: true }), }) }, [])
-
Like I said, I try a few things but nothing works. I think problem is in Pixi Plugin. Without Pixi Plugina, but with Pixi.js and only gsap, you can overwrite tween (make function which recreate that same tween) and this way dynamically update certain value in onComplete. In my example I chose the easiest way, change value through PIXI.js. https://codepen.io/isladjan/pen/pogjGNa
-
Wow Zach, things can be so simple!! This is what totally solved it for me: tweenMousePosition(newPos) { gsap.to(this.mousePos, 0.8, { x: newPos.x, y: newPos.y, onUpdate: () => this.adjustMask(), ease: "power4.out", overwrite: "auto" }); } Thanks so much for your help!!
-
Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance
-
I still don't understand. Are you asking for a mathematical equation that will allow you to convert a bunch of individual transform operations into their matrix3d() equivalent? And are you saying that you think converting it is going to somehow make it faster? You mentioned several times that "the drag becomes slow". If you're trying to solve a performance issue by defining the transform as a matrix3d() instead of a string of instructions, trust me - that will NOT solve the problem. I glanced at the performance profile in your link and there were massive hits on the rasterizer thread. That's almost surely the issue. I also noticed a few other problems: You're using an onmousemove handler and creating a tween in that handler which is highly inefficient. Be very careful about onmousemove - that can fire multiple times per requestAnimationFrame so it can be wasteful to constantly create tweens in that handler You forgot to set overwrite: true or overwrite: "auto" on your tweens that you're creating in that onmousemove. That's a BIG problem because you're constantly creating new tweens that are fighting with the old tweens that haven't finished yet. So if a user moves their mouse for 1 second, you could have 60 or even 100 tweens all fighting for control of the same properties of the same object. You don't need to set the transformOrigin and transformPerspective on every...single...tween. It'd be much more efficient to just gsap.set() it initially and be done. Idea: you could create a single linear tween of the tilt (rotationX, rotationY, etc.) of the element up front, pause() it, and then in your onmousemove handler you could animate the playhead of that tween. That may be more efficient. Anyway, I hope that helps. Happy tweening!
-
Yep, totally legit or if you want to have GSAP automatically kill all other tweens of the same target when creating a new one, just add overwrite: true to your new tween and BOOM they're nuked. 👍
-
So I kept tweaking the code a little bit on my original codepen and I decided to wrap it in a "gsap.utils.toArray" so that I can use it in multiple places. I want to post it here in cause anyone else needs it. Here is what I came up with. gsap.utils.toArray(".split").forEach(function(elem) { const splitTimeline = gsap.timeline({scrollTrigger: { trigger: elem, start: "top 80%", end: "bottom 10%", onToggle: self => gsap.to(elem, {opacity: self.isActive ? 1 : 0}), toggleActions: "restart pause restart none", markers: true } }); const splitTitle = new SplitText(elem); splitTimeline.from(splitTitle.chars, {duration: 1.5, opacity: 0, y: 100, stagger: {amount: 1}, ease: "back.out(1)", overwrite: "auto"}); });
-
How to update value in onComplete callback? I am using gsap 3, pixi.js and Pixi Plugin. I try a few things but it seems nothing works (tween overwrite, modifiers and updateTo() method). I have something like this: let frame = 0; function animate() { gsap.to(container, { pixi: { scale: scale, rotation: angle, x: x, y: y }, duration: 1.7, ease: "power3.in", onComplete: () => { //reset value gsap.set(scene, { pixi: { scale: 1, rotation: 0, x: app.screen.width / 2 } }); if (frame < 3) animate(); else animate2() } }); frame++ } I need when onComplete trigger, to gsap.set(..) use current value of app.screen.width ( width of render in pixi.js which change on resize event).
-
Thanks again for the help! I have changed my code to work with the 1 step directions, as for the for-each function doesn't it just overwrite all the moves, only preforming the last one? this is the code I have now https://codepen.io/naniio/pen/oNbvQdO Seems a lot cleaner to me now!
-
Hey Yandex. Some notes: I highly recommend overwrite: "auto" instead of overwrite: true because it will only kill off the conflicting tweens. You probably want to set defaults: {overwrite: "auto"} instead so it's passed to each tween. Why are you using keyframes here? Using regular tweens fixes the issue because defaults on timelines won't get passed to keyframes. They don't get passed to keyframes because keyframes essentially create a sub-timeline and defaults don't apply to those. If you want defaults on keyframes, apply it to the tween itself. You could technically pass in a defaults option that sets the defaults for each tween. Kinda meta but it works: defaults: { defaults: { overwrite: "auto" } } Another alternative is to use the global defaults for gsap: gsap.defaults({overwrite: "auto"}); I'd just use regular tweens: https://codepen.io/GreenSock/pen/WNreEaa?editors=0010
-
Dear GSAP community, I’ve a question about an ‘overwrite’ feature and some timeline time aspects. If I set an animated parameter without changing the time, it works pretty well! Example: https://codepen.io/belyanskii/pen/vYLBZQE But once I am trying not only to set (or change) an animated parameter but to set delay and duration, overwriting doesn’t seem to occur: https://codepen.io/belyanskii/pen/XWXrgQy Is there a way to overwrite the whole animation w/o clearing or deleting the tweens/timelines?
-
Animation comes back to mousemove after doing mouseleave
ZachSaucier replied to Trapti's topic in GSAP
Hey Trapti. Thanks for the clear demo. The reason why the leave doesn't work is because of you're using a setTimeout to delay the parallax effect for 200 ms. So the mouseleave does happen, just before the last parallax tween. I'm not sure why you're using a setTimeout... That's because of your .in ease. Every time it updates it creates a new tween and .in eases are slow at the start, hence it appears slow. I'd just use the condensed string form and say ease: "sine" which defaults to an out ease. I also recommend using overwrite: "auto" for that tween to kill off old tweens. Another reason why it appeared slow is because of the setTimeout. Another side note is that you don't need quotation marks for numerical values like 0. Here's a fork with those changes: https://codepen.io/GreenSock/pen/oNbvYOM?editors=0010- 2 replies
-
- 1
-
-
- transform
- mouseleave
- (and 1 more)
-
If you have multiple animations affecting the same properties of the same elements at the same time, there is no working around it There simply will be conflict, likely causing issues. A value simply cannot be two different values at the same time. Ways to work around that are to Use overwrite: 'auto' so that tweens will kill off tweens that they conflict with. Apply animations to a container or child instead of the element it would conflict with. Rewrite the animations to combine their effects into one animation. It sounds like you're using the first approach I outlined above.
-
The biggest issue here is that you're using a .from() in the second timeline. Let's look at what happens when your pen initiates: createRowAnimation fires: All of the cubes are given width:0 and height:0 immediately due to the .from(). When the timeline is ran, it will animate each cube's width and height from 0 to the default value. createColAnimation fires: All of the cubes are given width:0 and height:0 (again) due to the .from(). When the timeline is ran, it will animate each cube's width and height from 0 to 0. This is because the value before the .from() is called is already 0 due to the first timeline! Thus to fix the issue, use .fromTo() like Craig said or (what you likely want in this case so that they can overwrite each other more easily) use a .set() and then a .to(). https://codepen.io/GreenSock/pen/abvKyVW?editors=0010
-
Hi! I'm sorry, but I have some issue with mouseleave, in demo as you can see image with overlay is not dissapearing, if I make tl.reverse() on mouseleave everything is fine, but I need my timeline to hide everything immediately. What am I doing wrong?
-
How to continue animation that is bind to mousemove for mousewheel
ZachSaucier replied to AsKadir's topic in GSAP
Are you on Windows and do you mean with a mousewheel? If so that makes sense because it's immediately setting the value. You could switch out the quickSetters for .to() tweens and it'd be smoother I'd bet. Make sure to set overwrite to 'auto' if you're going to do that. Glad I could answer it before it was even asked -
Animation doesn't return to the beginning after the second click
ZachSaucier replied to chevohin's topic in GSAP
Hey chevohin and welcome to the GreenSock forums! Good question. The answer is that each time you click, you're creating a new animation. And the tweens in that animation are relative, meaning that they go from the current value to the provided value. So when you click mid animation, it uses the current value (instead of the starting value) as the new starting point and thus it isn't what you're expecting. To fix that issue, there are several solutions. Potentially the best is to create an animation outside of the click event and use control methods inside of the click event to manipulate it. Here's an example of that: https://codepen.io/GreenSock/pen/mdeOMQJ?editors=0010 You could also use .isActive() and an if statement to prevent the jumping. if(!snowmanHandsUpTl.isActive()) { snowmanHandsUpTl.play(0); } Another alternative is to use .fromTo() tweens which enforce a particular start value with overwrite: 'auto' in order to kill off the previous tweens but that's less performant and not necessary here. Note that I'm using GSAP 3 formatting. I think you're really enjoy and benefit from my article on tips to animate efficiently. Let us know if you have more questions. I'd love to see the end result of what you make! -
Hey Roman. By default, GSAP does not kill off tweens that affect the same properties of the same objects. If you want that to happen, you should set overwrite: 'auto' (or true) for the tweens that conflict. Alternatively, change the property globally: gsap.defaults({overwrite: 'auto'}); However, in your case it might make more sense to setup a timeline for the hover transition when the JS is initialized. Then on mouseenter you play it, on mouse leave you reverse it.
-
Thanks for the explanation. I think I understand what you're wanting to do. I think the key error is that your code above doesn't really handle overwriting well. What I mean by overwriting is when two animations are both trying to control the same properties of the same elements. There's conflict because you're telling it to be two values at the same time. The easiest way to handle this in your case is to change GSAP's default overwrite value from false to 'auto'. That will cause tweens to kill other tweens that it's in conflict with. You can change that setting globally by using gsap.defaults({overwrite: 'auto'}); Alternatively you could apply overwrite: 'auto' to just the tweens that could into conflict. Some other improvements you could make: Use GSAP 3's new syntax (no need for TimelineMax, TweenMax, etc.). Put the duration inside of the vars parameter so you can use defaults. Chain tweens on the timelines (I think it helps make it more clear that they are all on the same timeline). Just use scrollY for the scrolling position. All that put together: https://codepen.io/GreenSock/pen/XWbGavp?editors=0010
-
Thanks for the extra clarification. I had tried doing a similar tactic setting my animation to a variable but I didn't have any overwrite settings. I had tried so many things that I thought should work but didn't so I just started trying everything else I could think of. Alas... adding the overwrite parameter was not one of them. I am guessing I won't forget that little tidbit now. Sometimes the best way to learn is to get burned. #scalded
