Jump to content

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

Search the Community

Showing results for 'overwrite'.

  • 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



  1. You have conflicting tweens here, setting overwrite:true on the exit tween seems to fix the issue. Is this what you're after? https://codepen.io/GreenSock/pen/QWgWwda?editors=0010
  2. If it works on CodePen, then it's an issue with your WordPress setup. There's really not a lot we can say beyond that. Just make sure it's not messing with the scroll. It would be the same as creating a standalone trigger. ScrollTrigger.create({ start: "top top", end: "bottom bottom", snap: 1 / (3 - 1), onUpdate({ progress }) { sketch.model.rotation.y = 2 * 3.14 * progress; sketch.model.position.z = -2.6 * Math.sin(3.14 * progress); } }); Also not that the progress value isn't include in the scrub. If you want to "scrub" it, you can do something like this. let proxy = { progress: 0 }; ScrollTrigger.create({ start: "top top", end: "bottom bottom", snap: 1 / (3 - 1), onUpdate({ progress }) { gsap.to(proxy, { progress: progress, ease: "power3", overwrite: true, onUpdate() { sketch.model.rotation.y = 2 * 3.14 * proxy.progress; sketch.model.position.z = -2.6 * Math.sin(3.14 * proxy.progress); } }); } });
  3. React has updated and introduced hooks since this article was written. We recommend reading our updated guide to animating with GSAP in React. This page was also 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 Preface This guide assumes a basic knowledge of both the GreenSock Animation Platform (GSAP) and React, as well as some common tools used to develop a React app. As GSAP becomes the de-facto standard for creating rich animations and UI's on the web, developers must learn how to integrate it with other tools like React which has become popular because it allows developers to write their apps in a modular, declarative and re-usable fashion. As a moderator in the GreenSock forums, I've noticed that there are a few common hurdles to getting the two working together seamlessly, like referencing the DOM element appropriately, doing things The React Way, etc. which is why I'm writing this article. We won't delve into how a React app should be structured since our focus is on using GSAP, but the techniques used throughout this guide follow the official guidelines and have been reviewed by maintainers of the React Transition Group tool. We'll start simple and get more complex toward the end. How GSAP Works GSAP basically updates numeric properties of an object many times per second which creates the illusion of animation. For DOM elements, GSAP updates the the inline style properties. const myElement = document.getElementById("my-element"); TweenLite.to(myElement, 1, {width: 100, backgroundColor: "red"}); As you can see this means that we need access to the actual DOM node rendered in the document in order to pass it to the TweenLite.to() method. How React Works Explaining how React works is beyond the scope of this article, but let's focus on how React gets the JSX code we write and puts that in the DOM. <div className="my-class"> Some content here </div> With React, we normally don't pass an id attribute to the element because we use a declarative way to access methods, instances, props and state. It's through the component's (or the application's) state that we can change how things are represented in the DOM. There's no direct DOM manipulation, so typically there's no need to actually access the DOM. The React team has given developers ways to access the DOM nodes when needed, and the API changed a bit over the years as React matured. At this time (September, 2018) the latest version of React (16.4.2) allows developers to use Refs to access the DOM nodes. In this guide we'll mainly use the Callback Refs to create a reference to the DOM node and then feed it into GSAP animations because it's much faster for GSAP to directly manipulate properties rather than funneling them through React's state machine. Creating Our First Animation We'll use the ref to access the DOM node and the componentDidMount() lifecycle method of the component to create our first animation, because this will guarantee that the node has been added to the DOM tree and is ready to be passed into a GSAP animation. class MyComponent extends Component { constructor(props){ super(props); // reference to the DOM node this.myElement = null; // reference to the animation this.myTween = null; } componentDidMount(){ // use the node ref to create the animation this.myTween = TweenLite.to(this.myElement, 1, {x: 100, y: 100}); } render(){ return <div ref={div => this.myElement = div} />; } } Not that difficult, right? Let's go through the code so we can understand what is happening. First when we create an instance of this class, two properties are added to it: myElement and myTween, but both are equal to null. Why? Because at this point the node has not been added to the DOM tree and if we try to pass this node to a GSAP animation, we'll get an error indicating that GSAP cannot tween a null target. After the new instance has been initialized, the render() method runs. In the render method we're using the ref attribute that is basically a function that has a single parameter – the DOM node being added to the DOM tree. At this point we update the reference to the DOM node created in the class constructor. After that, this reference is no longer null and can be used anywhere we need it in our component. Finally, the componentDidMount() method runs and updates the reference to myTween with a TweenLite tween whose target is the internal reference to the DOM node that should animate. Simple, elegant and very React-way of us! It is worth mentioning that we could have created a one-run-animation by not creating a reference to the TweenLite tween in the constructor method. We could have just created a tween in the componentDidMount method and it would run immediately, like this: componentDidMount(){ TweenLite.to(this.myElement, 1, {x: 100, y: 100}); } The main benefit of storing a TweenLite tween as a reference in the component, is that this pattern allows us to use any of the methods GSAP has to offer like: play(), pause(), reverse(), restart(), seek(), change the speed (timeScale), etc., to get full control of the animations. Also this approach allows us to create any GSAP animation (TweenLite, TweenMax, TimelineLite, etc.) in the constructor. For example, we could use a timeline in order to create a complex animation: constructor(props){ super(props); this.myElement = null; this.myTween = TimelineLite({paused: true}); } componentDidMount(){ this.myTween .to(this.myElement, 0.5, {x: 100}) .to(this.myElement, 0.5, {y: 100, rotation: 180}) .play(); } With this approach we create a paused Timeline in the constructor and add the individual tweens using the shorthand methods. Since the Timeline was paused initially, we play it after adding all the tweens to it. We could also leave it paused and control it somewhere else in our app. The following example shows this technique: Simple Tween Demo Animating a Group of Elements One of the perks of using React is that allows us to add a group of elements using the array.map() method, which reduces the amount of HTML we have to write. This also can help us when creating an animation for all those elements. Let's say that you want to animate a group of elements onto the screen in a staggered fashion. It's simple: constructor(props){ super(props); this.myTween = new TimelineLite({paused: true}); this.myElements = []; } componentDidMount(){ this.myTween.staggerTo(this.myElements, 0.5, {y: 0, autoAlpha: 1}, 0.1); } render(){ return <div> <ul> {elementsArray.map((element, index) => <li key={element.id} ref={li => this.myElements[index] = li} > {element.name} </li>)} </ul> </div>; } This looks a bit more complex but we're using the same pattern to access each DOM node. The only difference is that instead of using a single reference for each element, we add each element to an array. In the componentDidMount() method we use TimelineLite.staggerTo() and GSAP does its magic to create a staggered animation! Multiple Elements Demo Creating a Complex Sequence We won't always get all the elements in an array so sometimes we might need to create a complex animation using different elements. Just like in the first example we store a reference in the constructor for each element and create our timeline in the componentDidMount() method: Timeline Sequence Demo Note how in this example we use a combination of methods. Most of the elements are stored as an instance property using this.element = null, but also we're adding a group of elements using an array.map(). Instead of using the map() callback to create tweens in the timeline (which is completely possible), we're adding them to an array that is passed in the staggerFrom() method to create the stagger effect. Animating Via State The most commonly used pattern to update a React app is through changing the state of its components. So it's easy to control when and how elements are animated based on the app state. It's not very difficult to listen to state changes and control a GSAP animation depending on state, using the componentDidUpdate() lifecycle method. Basically we compare the value of a state property before the update and after the update, and control the animation accordingly. componentDidUpdate(prevProps, prevState) { if (prevState.play !== this.state.play) { this.myTween.play(); } } Control Through State Demo In this example we compare the value of different state properties (one for each control method implemented in the component) to control the animation as those values are updated. It's important to notice that this example is a bit convoluted for doing something that can be achieved by calling a method directly in an event handler (such as onClick). The main idea is to show the proper way of controlling things through the state. A cleaner and simpler way to control an animation is by passing a prop from a parent component or through an app state store such as Redux or MobX. This modal samples does exactly that: // parent component <ModalComponent visible={this.state.modalVisible} close={this.setModalVisible.bind(null, false)} /> // ModalComponent constructor(props){ super(props); this.modalTween = new TimelineLite({ paused: true }); } componentDidMount() { this.modalTween .to(this.modalWrap, 0.01, { autoAlpha: 1 }) .to(this.modalDialog, 0.25, { y: 50, autoAlpha: 1 }, 0) .reversed(true) .paused(false); } componentDidUpdate(){ this.modalTween.reversed(!this.props.visible); } As you can see the modal animation is controlled by updating the visible prop passed by its parent, as well as a close method passed as a prop. This code is far simpler and reduces the chance of error. State Modal Demo Using React Transition Group React Transition Group(RTG) is a great tool that allows another level of control when animating an element in a React app. This is referred to as the capacity to mount and unmount either the element being animated or an entire component. This might not seem like much when animating a single image or a div, but this could mean a significant performance enhancement in our app in some cases. SIMPLE TRANSITION DEMO In this example the <Transition> component wraps the element we want to animate. This element remains unmounted while it's show prop is false. When the value changes to true, it is mounted and then the animation starts. Then when the prop is set to false again, another animation starts and when this is completed it can also use the <Transition> component to wrap the entire component. RTG also provides the <TransitionGroup> component, which allows us to control a group of <Transition> components, in the same way a single <Transition> component allows to control the mounting and unmounting of a component. This is a good alternative for animating dynamic lists that could have elements added and/or removed, or lists based on data filtering. Transition Group Demo <Transition timeout={1000} mountOnEnter unmountOnExit in={show} addEndListener={(node, done) => { TweenLite.to(node, 0.35, { y: 0, autoAlpha: show ? 1 : 0, onComplete: done, delay: !show ? 0 : card.init ? props.index * 0.15 : 0 }); }} > In this example we use the addEndListener() callback from the <Transition> component. This gives us two parameters, the node element being added in the DOM tree and the done callback, which allows to control the inner state of the <Transition> component as the element is mounted and unmounted. The entire animation is controlled by the in prop, which triggers the addEndListener() and ultimately the animation. You may notice that we're not creating two different animations for the enter/exit state of the component. We create a single animation that uses the same DOM node and the same properties. By doing this, GSAP's overwrite manager kills any existing animation affecting the same element and properties, giving us a seamless transition between the enter and exit animations. Finally, using RTG allows us for a more fine-grained code, because we can use all the event callbacks provided by GSAP (onStart, onUpdate, onComplete, onReverse, onReverseComplete) to run all the code we want, before calling the done callback (is extremely important to notify that the animation has completed). Animating Route Changes Routing is one of the most common scenarios in a React app. Route changes in a React app means that an entirely different view is rendered depending on the path in the browser's address bar which is the most common pattern to render a completely different component in a route change. Obviously animating those changes gives a very professional look and feel to our React apps. Rendering a new component based on a route change means that the component of the previous route is unmounted and the one for the next route is mounted. We already covered animating components animations tied to mount/unmount using the <Transition> component from RTG, so this is a very good option to animate route changes. <BrowserRouter> <div> <Route path="/" exact> { ({ match }) => <Home show={match !== null} /> } </Route> <Route path="/services"> { ({ match }) => <Services show={match !== null} /> } </Route> <Route path="/contact"> { ({ match }) => <Contact show={match !== null} /> } </Route> </div> </BrowserRouter> This main component uses React Router's <BrowserRouter> and <Route> and checks the match object passed as a prop to every <Route> component, while returning the component that should be rendered for each URL. Also we pass the show property to each component, in the same way we did in the transition example. <Transition unmountOnExit in={props.show} timeout={1000} onEnter={node => TweenLite.set(node, startState)} addEndListener={ (node, done) => { TweenLite.to(node, 0.5, { autoAlpha: props.show ? 1 : 0, y: props.show ? 0 : 50, onComplete: done }); }} > As you can see, the code is basically the same used to animate a single component; the only difference is that now we have two animations happening in different components at the same time. Route Animation Demo It's worth noting that the animations used in this example are quite simple but you can use any type of animation even complex, nested animations. As you can see by now, using GSAP and React can play together nicely. With all the tools and plugins GSAP has to offer the sky is the limit for creating compelling and amazing React applications! FAQ What is this "Virtual DOM" thing, that is referred so much when it comes to React Apps? Can GSAP work with this virtual dom? The Virtual DOM is what React uses to update the DOM in a fast and efficient way. In order to learn more about it check this article and the React Docs. GSAP can't work with the virtual DOM because the elements in the Virtual DOM are not exactly DOM nodes per-se. I often read about the declarative nature of React. Does that affect how we use GSAP in a React APP? Yes. React works by updating the rendered DOM through changes in the App state, so when creating an animation using GSAP, instead of reaching out directly to the DOM, like in most other cases, we need to wait for those changes in the app state and the DOM to be rendered, in order to use the current representation of the app state and create the animation. To learn more about how declarative and imperative code work read this article. In the second sample I see this code in the ref callback ref={div => this.cards = div}. Why is the index being used instead of just pushing the element in the array? The reason for that is that every time a React component is re-rendered, the render method is executed, but the original instance remains unchanged. The array used to create the animation is created in the component's constructor. The GSAP animation (a TimelineLite) is created in the componentDidMount hook. These two elements are created just once in the App's lifecycle, while the render method is executed on every re-render. Therefore if we push the elements to the array on every re-render, even though the Timeline instance won't change, the array will get bigger and bigger every time the component is re-rendered. This could cause a memory issue, especially for large collections. In the guide one of the samples triggers animations via the state of a component or the app. Is it possible to update the state of the component/app using GSAP? Absolutely! All you have to do is use one of the many callback events GSAP has to offer. The only precaution is to be aware of infinite loops. That is if an animation is started on the render method of a component and a callback from that animation updates the state of the component then that will trigger a re-render, which will start the animation again. You can check this simple example of how that can be done. Is it possible to trigger a route change using GSAP? It is possible using React Router's API. Although is not recommended because using React Router's API directly will prevent triggering the route change animations when using the browser's back and forward buttons. However, using React Transition Group with GSAP does trigger the route change animations with the native navigation methods. Can I use other GSAP plugins and tools in a React App? This guide shows only TweenMax, Timeline and the CSS Plugin? Yes, any GSAP tool or plugin you want can be used in a React app. Just be sure to follow the same patterns and guidelines from this article and you'll be fine. I tried the code in the guide and samples, but it doesn't work. What can I do? Head to the GreenSock forums where all your questions will be answered as fast as possible. I want to contribute or post an issue to this guide. Where can I do that? Even though this guide was reviewed by GreenSock and React experts, perhaps something might have slipped away, or with time and new versions, some things should or could be done differently. For those cases please head to this GitHub Repo and inform any issues or create a Pull Request with the changes you think should be added. New to GSAP? Check out the Getting Started Guide. Got questions? Head over to the GreenSock forums where there's a fantastic community of animators. Acknowledgments I'd like to thank the three developers that took time from their work and lives to review this guide as well as the samples in it. I couldn't have done this without their help and valuable input. Please be sure to follow them: Xiaoyan Wang: A very talented React developer. While Xiaoyan doesn't have a very active online social life (Twitter, Facebook, etc), you can follow what he does on GitHub. Jason Quense: One of the maintainers of React Transition Group and part of the React Bootstrap Team. Jason also collaborates in many other React-related projects. Check Jason's GitHub profile for more info. Matija Marohnić: The most active contributor and maintainer of React Transition Group and Part of the Yeoman Team. Matija also contributes in a lot of React-related projects as well as many other open source software. Be sure to follow Matija in GitHub and Twitter. A guest post from Rodrigo Hernando, a talented animator/developer who has years of experience solving animation challenges. Rodrigo is a seasoned React developer and he was one of our first moderators, serving the GreenSock community since 2011 with his expert help and friendly charm.
  4. I assume you want something like this: gsap.to(tl, { timeScale: 1, ease: "power1.inOut", duration: 2, overwrite: true }); ?
  5. Thanks nicofonseca, I have "circ.out" in my code, just an error in my message. Still doesn't seem to have any affect in the transition from the updated velocity to the default gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true, ease: 'circ.out' }); Is there a way to achieve a smoother transition?
  6. Hi, I was wondering if there is away to make a smoother transition from where I'm setting the scroll velocity to when I revert back to gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true }); I added a delay with "duration: 3" which makes it a bit smoother however adding a an ease gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true, ease: 'circa.out' }); doesn't seem to make any difference. Any help would be greatly received.
  7. Thanks for the tips, Blake. It still doesn't seem to scrub without setting markers to true. Here is a better example on the current development link: https://verhaal.netlify.app/ For full context, I am trying to mimic the behavior on this site: https://fuzzco.com/ if (typeof window !== `undefined` && location) { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.refresh(); useEffect(() => { var direction = -1 var mod = gsap.utils.wrap(0, window.innerHeight); gsap.set('.container-marquee',{yPercent:100}) var anim = gsap.to('.container-marquee', { yPercent: (100 * direction), ease: 'linear', overwrite: true, duration: 20, repeat:-1, }) function infiniteReverse() { tl.totalTime(tl.rawTime() + tl.duration() + tl.repeatDelay()); } var tl = gsap.timeline({ pause: false, repeatDelay:0.5, onReverseComplete: infiniteReverse, scrollTrigger: { trigger: document.body, start: "top top", // When the top of the trigger reaches the top of the viewport end: "bottom top", // When the bottom of the trigger reaches the top of the scroller markers: false, scrub: true, toggleActions:"restart complete reverse reset play", onUpdate: self => { direction = self.direction gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5, yPercent: (100 * direction), }); }, }, }); }, []) }
  8. Hi @kcarp Welcome to forums! You're not missing anything obvious, you just stumbled upon a quirk when going backwards. This post gives an explanation and helper function for onReverseComplete. Also, for a smoother transition when changing direction, you can animate the timeScale. gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5 });
  9. Hello, We have a project built in Gatsby.js which is nearing completion and we're interested in hiring a freelancer to have a second look at a few issues that persist. We have a page made up of sections and each section consists of many ScrollTriggers. We have the individual animations looking quite good. We're attempting to also integrated the ScrollToPlugin in order to snap the user between sections, which also works, but when animating the 'window' between section it is extremely choppy. We've loaded the UMD distribution files, utilized several React hooks (useEffect, useLayoutEffect, useCallback). We are trying to overwrite all tweens, kill all other tweens. You name it, we've tried it --- the kicker is that it does work, almost beautifully, but as is, we cannot launch the site. We also have a side navigation which makes use of the AnchorLink module. We need to have this converted to ScrollToPlugin so that we can add an offset (currently the anchors break the animations and cause overlapping --- which is obvious, they are currently positioned where the other ScrollTriggers are positioned to pin). Lastly, we're having issues with elements becoming visible that should not be, when resizing, refreshing. We're invalidating the animations and killing all of the ScrollTriggers within our useEffects. This one is not so simple to describe without seeing it. We utilize Bitbucket so we could definitely give you access to the repository to have a look before you commit to anything. If you'd like to jump on a phone call or chat via Slack --- or --- whatever works for you, let me know. Even if you do not have the time to devote to the project and you think you know how to resolve these issues --- definitely message me because we can also just do a consultation. We're quite capable, but we've tried everything we could think of. We've also tried to post in the forum and have gotten lots of great help but the issues persists. For us to really resolve the issues we need to provide a Codesandbox, and we have when possible, but it's just not feasible to build a distilled down version of this; there are far too many moving parts. Timeframe: No timeframe, we can begin with a consultation. I would like to speak with you as soon as possible though! If we find that the scope is more than we can handle or you do have time to just jump in, you can estimate how much time you think will be required. Compensation: Name your price; hourly or fixed
  10. Typing too fast - yep, I meant overwrite: 'auto' I'll edit that to avoid confusion.
  11. I think perhaps you meant overwrite: "auto" on the second tween. overwrite: true immediately kills all other tweens of the same target (even if there aren't any overlapping properties). The "auto" mode only runs the first time the tween actually renders, and isolates only the individual properties that overlap. Also keep in mind that once a tween (or a property in a tween) is killed, it's dead. It doesn't come back the next time you run it. I personally favor the finishOnFastLeave() helper function approach because it avoids killing things so that if the user scrolls back up and goes slowly, things still work the way you intended.
  12. Hey @Nysh, There's still going to be a conflict between the tweens, you just can't see it as the first tween is playing too fast to notice. If we slow it down and you scroll down fast it will still be there. The magic combo in this case will be immediateRender:false and overwrite:'auto' on the second tween. This will result in the behaviour I think we were both expecting! ScrollTrigger tweens render immediately so that all the positioning can be precalculated. We want to wait and only run overwrite as the second tween plays, that way any conflicts occurring at that point will be killed. https://codepen.io/GreenSock/pen/GRmzWob?editors=0010 Here's a simplified demo with some console logs to show the start, end and when the tween's interrupted! https://codepen.io/GreenSock/pen/c298bc17db96f11251efc1740a4d10e4?editors=0011
  13. 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):
  14. Interesting. I would have thought overwrite true would have worked here too. 👀 When the box tween in the box2 timeline has overwrite true set, the first box tween doesn't play at all... I'm definitely missing something. https://codepen.io/cassie-codes/pen/f73a2dfc64470853d40c7540cb8996fd?editors=1010
  15. You can animate the progress of a timeline. onUpdate({ progress }) { // add this if you want it to stop it when scrolling up // gsap.killTweensOf(tl); if (tl.progress() < progress) { gsap.to(tl, { progress: progress, duration: 3, overwrite: true }); } }
  16. Indeed That's what I tried but there are always new errors and it doesn't seem to overwrite what is done in the private function so... Just making a search replace in all files before delivery with sublime text is much faster
  17. @GreenSock thanks Jack, that clarifies several questions. I didn't realize I could set everything to a fixed height and hide the overflow -- I thought that would impact how ScrollTrigger behaves. That makes it much easier to calculate the position in different scenarios. I also see revert and refresh options are part of the self.enable() function but I didn't see those documented. @OSUblake I created as minimal of a Codepen demo as possible. I'm pretty sure this behavior is correct but I'm trying to find a work around for anchors. Within each section would be many other ScrollTriggers with their own timelines; each section is pinned for the duration of those animations. I also tried Jack's suggestion -- I am able to save and set a scrollTo position with overwrite: "all", after re-enabling the ScrollTriggers and it does move the viewport to that position (the position is off due to paddingBottom but this can be calculated/accounted for other ways), but several of the ScrollTriggers end up firing (timelines become overlapped). I looked at the self.enable function -- the viewport is reset when self.enabled is set to true; but as you know that's tied to a ton of logic. I'm hoping to just toggle the ScrollTriggers off, move the viewport, toggle them back on so the current section (and all other sections) continue pinning. Use case would be for anchors and other functionality that might require going through all of the ScrollTriggers very quickly --- another example: scroll to top button. https://codepen.io/steve-giorgi/pen/jOmeBwK I'm forking the demo to see if I can replicate the behavior described above when saving/restoring the position.
  18. Yeah, that's what loops are for. 😉 gsap.utils.toArray(".btn-rotated").forEach(btn => { const animation = gsap.to(btn, { paused: true, rotation: 360, repeat: -1, ease: "none", duration: 5 }).timeScale(0); btn.addEventListener("mouseenter", () => { animation.play(); gsap.to(animation, { timeScale: 1, duration: 1, overwrite: true }); }); btn.addEventListener("mouseleave", () => { gsap.to(animation, { timeScale: 0, duration: 1, overwrite: true, onComplete() { animation.pause(); } }); }); });
  19. the timescale example is what i was looking for. in the start there is smooth easing, in the middle(during hover) an infinite loop and at the end it kinds of fades out with easing. thanks @OSUblake – but i like the code more of @cassie 2nd codepen as i need to be sure to trigger animation for the current element if there are multiple with same classes at once. so this is my final code: $(".btn-rotated").mouseover((e) => { gsap.to(e.currentTarget, { duration: 5, ease: "none", rotation: "-=360deg", repeat: -1 }); }).mouseleave((e) => { gsap.to(e.currentTarget, { duration: 2, ease: "power.out", rotation: "-=50deg", overwrite: true }); }); only thing whats missing is the smooth easing start.
  20. Hi Julia! ThrowProps is deprecated. See the IntertiaPlugin docs. https://greensock.com/docs/v3/Plugins/InertiaPlugin Another change from v2 to v3 is the overwrite behavior. If we're animating the same properties with different durations, we should definitely overwrite those animations. GreenSock Slider with Skew v3 (codepen.io)
  21. Not sure I fully understand your question, but you probably shouldn't be making an animation just for the initial state. Click Animation On Array Index i Overwrite Issue (codepen.io)
  22. Yeah, it's a fun challenge. Very doable, but I don't have time to build it all for you. One general idea is to treat the horizontal movement as one animation (wired to the scroll with a scrub number to smooth it out), Then... Create an individual tween for each element that handles the skew and scale to the maximum values. Let's say that's a scale of 1.5 and a skewY of 15 (or whatever). Now create a generic object with a property that'll handle the "power" (doesn't matter what you call it), like {power: 0}. This is just a value between 0 and 1 that controls how much of the zoom/skewY gets applied. The faster you scroll, the closer to 1 it gets. When you're not scrolling, it goes back to 0. In an onUpdate on your ScrollTrigger, animate that "power" value based on the velocity. So it'll always lag a little behind, depending how long your duration is on that tween. This gives it a nice smooth feel. Don't forget to overwrite: true on that tween so it doesn't stack up. In an onUpdate of that tween, loop through each of the scale/skewY tweens and adjust their progress based on the power and the proximity to the center. So if power is 1, the progress of the tween of the element at exactly center is 1. The tween that's a little further from the center may be 0.6, for example. You just use a multiplier. This is relatively efficient because you're just reusing one tween for each element and adjusting the progress accordingly. And there's a single tween doing all of the horizontal movement. I hope that helps! If you'd like our help to actually build it, contact us for a paid consulting estimate.
  23. Yep, @OSUblake and @PointC are exactly right. One other option: set up your animations with ease: "none" and then you can animate the playhead with any ease you want with another tween: let tl = gsap.timeline({defaults: {ease: "none"}, paused: true}); tl.to(...) .to(...); // here's the magic: gsap.to(tl, {time: tl.duration(), ease: "power3.out"}); // then to go backwards with another ease: gsap.to(tl, {time: 0, ease: "power4.inOut", overwrite: true});
  24. Of course it helps. I agree that it is much better approach: better functionallity and more readable. After seeing this solution it seem obvious. I learned some interesting things like overwrite property. And some javascript basics: I thought this way of declaring the isOpen variable would put it in the global scope, but the variable belongs to the scope of each menu, just like box and items. Thank you much.
  25. Sure, in your onUpdate(), put this at the bottom: gsap.to(tl, {timeScale: 1, overwrite: true});