Search the Community

Hi there, I'm re discovering GSAP after 6 years, I'm trying to make an animation on a little website project, it's working great except that my page can be seen before the animation, I can't figure out why ? Any idea or help about it please ? Working with reactjs and vite js Here is my code: import { useRef, useEffect } from "react" import { Link } from "react-router-dom" import Champions from "../components/Champions" import { gsap, Power3, Power4 } from "gsap" import "../css/_frame.css" import "../css/_cards.css" const Home = props => { let screen = useRef(null); let body = useRef(null); useEffect(() => { var tl = new gsap.timeline(); tl.to(screen, { duration: 1.2, width: "100%", left: "0%", ease: Power3.easeInOut, }); tl.to(screen, { duration: 1, left: "100%", ease: Power3.easeInOut, }); tl.set(screen, { left: "-100%" }); gsap.to(body, {duration: 0.3}, { css: { opacity: "1", pointerEvents: "auto", ease: Power4.easeInOut } }).delay(0); return () => { gsap.to(body, {duration: 1}, { css: { opacity: "0", pointerEvents: 'none' } }); } }); return ( <> <div className="load-container"> <div className="load-screen" ref={(el) => (screen = el)}></div> </div> <div data-barba="container" className="home"> <div ref={(el) => (body = el)} className="Headd"> {Object.entries(props.originData).map((origin, key) => { return ( <div className="champions" key={key}> {Object.values(origin).map((champions) => { return Object.values(champions).map((champion, key) => { return ( champion.name && ( <Link to={"/" + origin[0] + "/" + champion.name} key={key}> <Champions champion={champion} /> </Link> ) ) }) })} </div> ) })} </div> </div> </> ) } export default Home What I get in the video. Many thanks to anyone who have read me gsap_issue.mp4

Hello GSAP community, I'm working on a React project where I'm attempting to create a smooth page transition with GSAP and React Router. The specific effect I aim to achieve is this: when a user clicks on a button (which is text with a background image), I'd like the image within the text to grow and eventually become the background image of the new route. Here's the scenario in detail: - I have a list of clickable project cards on the homepage, each with text over a background image. - when clicking one of these text elements, I would like the background image to expand, filling the entire screen and then transitioning into the background of the next page So far, I have tried animating the scale of the element . However, I am running into two main issues: 1. The `scale` property does not seem to be the correct approach for making the image become the background smoothly. 2. The transition to the other route comes off as abrupt and I'm struggling to integrate the animation seamlessly into the page change. I would greatly appreciate any advice on how to create a seamless transition where the clipped background image expands to fill the screen and serves as a connector between the two routes. Here's a link to a current sample of the project on CodeSandbox: Codesandbox Exemple

Here is my final Vue file with those adjustments. Does this seem correct to you? I've changed all transitions to GSAP transitions. I notice that if I quickly scroll down the page as soon as routing landing on the page, it seems to mess up the initialisation of the scroll trigger / smoother. Also am I suppose to set watchers for every ref I need to attach triggers too? As some refs may not be ready by the time the transition completion state is truthy. <template> <div> <TheHeader class="fixed top-0" /> <div id="smooth-wrapper"> <div id="smooth-content"> <main ref="background"> <div ref="expWrap" class="exp relative"> <ClientOnly><HomeTheExperience ref="experience" /></ClientOnly> </div> <div class="z-50 flex h-[calc(100svh-64px)] w-screen items-center justify-center"> <transition name="fade"> <img v-if="showBannerLogo" ref="logo" class="logo-selector z-30 h-[150px] md:h-[250px]" src="~/assets/logo.svg" alt="Logo" /> </transition> </div> <div ref="skyColour" class="fixed top-0 -z-10 h-[100lvh] w-screen bg-gradient-to-b from-[#1c2c47] to-[#7bace8]" ></div> <HomeShowreelSection v-if="data" :home="data" /> </main> </div> </div> </div> </template> <script setup> import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { ScrollSmoother } from 'gsap/ScrollSmoother'; import transitionConfig from '../helpers/transitionConfig'; import { useTransitionComposable } from '../composables/transition-composable'; import { homeQuery } from '@/queries/contentQueries'; const { transitionState } = useTransitionComposable(); let ctx; const expWrap = ref(null); const skyColour = ref(null); const background = ref(null); const experience = ref(null); const showBannerLogo = ref(false); const logo = ref(null); const data = await useSanityData({ query: homeQuery }); const mainStore = useMainStore(); mainStore.setLogoVisibility(false); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); watch(logo, (newValue) => { if (transitionState.transitionComplete) { ctx.add(() => { ScrollTrigger.create({ trigger: logo.value, start: 'bottom top', end: 'center center', onLeave: () => { mainStore.setLogoVisibility(true); }, onEnterBack: () => { mainStore.setLogoVisibility(false); }, }); }); } }); watch(() => transitionState.transitionComplete, (newValue) => { if (newValue) { ctx = gsap.context(() => { ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, }); ScrollTrigger.create({ trigger: skyColour.value, start: 'top top', end: 90000, pin: true, pinSpacing: false, }); ScrollTrigger.create({ trigger: expWrap.value, start: 'top top', end: 90000, pin: true, pinSpacing: false, }); const tl = gsap.timeline({ scrollTrigger: { trigger: background.value, start: 'top top', end: 'bottom bottom', scrub: true, }, }); tl.to(skyColour.value, { opacity: 0 }); if (expWrap.value) { tl.to(expWrap.value, { opacity: 0, autoAlpha: 0 }); } }, '#smooth-wrapper'); } }); onMounted(() => { showBannerLogo.value = true; }); onUnmounted(() => { mainStore.setLogoVisibility(true); ctx && ctx.revert(); }); definePageMeta({ pageTransition: transitionConfig, layout: 'landing', }); </script>

Hi, I am building a slider based on this example https://codepen.io/andrei-savu/pen/BaPqzvX It works when it's alone on a page, https://yaojuilan.art/gsap While it isn't working when there is something else https://yaojuilan.art/system_of_conductors/field-walk#kinmen (the slider works sometime. it is unstable. ) I tried logging out the observer onChange, the event does trigger, but the items just would not do the horizontal transition. I am wondering if observer has some sort of limitation, or maybe observer listener is interfering with something? Sorry i did not create a codepen, because this component does works standalone. Here is the slider component export default async function Page() { const data= await getPageContent() return ( <div id='intro' className='relative h-auto w-full overflow-x-hidden'> <div className='h-[50vh] w-full'> some content </div> <Slider items={data?.carousel_img?.images} /> <div className='h-[200vh] w-full bg-red-100'> some content </div> </div> ) } export default function Slider({ items, section }) { useGSAP(() => { let loop = horizontalLoop(`.carousel-${section} li`, { repeat: -1 }) let slow = gsap.to(loop, { timeScale: 0, duration: 0.5 }) loop?.timeScale(0) Observer.create({ target: `.carousel-${section}`, type: 'pointer,touch,wheel', wheelSpeed: -1, preventDefault: true, onChange: (self) => { loop.timeScale(Math.abs(self.deltaX) > Math.abs(self.deltaY) ? -self.deltaX : -self.deltaY) // whichever direction is bigger slow.invalidate().restart() // now decelerate }, }) }) return ( <div className='absolute bottom-12 w-full cursor-grab overflow-hidden'> <ul className={`carousel-${section} carousel flex flex-nowrap pl-0`}> {items?.map((item, i) => ( <li key={i}> <Image alt={'collective of images'} src={item} width={150} height={150} sizes='100vw' className='pointer-events-none touch-none select-none ' /> </li> ))} </ul> </div> ) } function horizontalLoop(items, config) { items = gsap.utils.toArray(items) if (!items.length) return config = config || {} let tl = gsap.timeline({ repeat: config.repeat, paused: config.paused, defaults: { ease: 'none' }, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100), }), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], xPercents = [], curIndex = 0, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural totalWidth, curX, distanceToStart, distanceToLoop, item, i gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster. xPercent: (i, el) => { let w = (widths[i] = parseFloat(gsap.getProperty(el, 'width', 'px'))) xPercents[i] = snap((parseFloat(gsap.getProperty(el, 'x', 'px')) / w) * 100 + gsap.getProperty(el, 'xPercent')) return xPercents[i] }, }) gsap.set(items, { x: 0 }) totalWidth = items[length - 1].offsetLeft + (xPercents[length - 1] / 100) * widths[length - 1] - startX + items[length - 1].offsetWidth * gsap.getProperty(items[length - 1], 'scaleX') + (parseFloat(config.paddingRight) || 0) for (i = 0; i < length; i++) { item = items[i] curX = (xPercents[i] / 100) * widths[i] distanceToStart = item.offsetLeft + curX - startX distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, 'scaleX') tl.to( item, { xPercent: snap(((curX - distanceToLoop) / widths[i]) * 100), duration: distanceToLoop / pixelsPerSecond }, 0, ) .fromTo( item, { xPercent: snap(((curX - distanceToLoop + totalWidth) / widths[i]) * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false, }, distanceToLoop / pixelsPerSecond, ) .add('label' + i, distanceToStart / pixelsPerSecond) times[i] = distanceToStart / pixelsPerSecond } function toIndex(index, vars) { vars = vars || {} Math.abs(index - curIndex) > length / 2 && (index += index > curIndex ? -length : length) // always go in the shortest direction let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex] if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments vars.modifiers = { time: gsap.utils.wrap(0, tl.duration()) } time += tl.duration() * (index > curIndex ? 1 : -1) } curIndex = newIndex vars.overwrite = true return tl.tweenTo(time, vars) } tl.next = (vars) => toIndex(curIndex + 1, vars) tl.previous = (vars) => toIndex(curIndex - 1, vars) tl.current = () => curIndex tl.toIndex = (index, vars) => toIndex(index, vars) tl.times = times tl.progress(1, true).progress(0, true) // pre-render for performance if (config.reversed) { tl.vars.onReverseComplete() tl.reverse() } return tl }

Hi, If you are loading the entire page maybe you're using some transition library like Barba or something like that? In that case you should kill the ScrollSmoother instance after the page has changed and create it again when the page loads again. Also this seems a bit wasteful IMHO: onUpdate: (self) => { var clipPathHeight = (1 - self.progress) * 100 + '%'; gsap.set('.gooey-container.page-progress .progress-fill', { clipPath: 'polygon(0 100%, 100% 100%, 100% ' + clipPathHeight + ', 0 ' + clipPathHeight + ')' }); }, If you want to do something like that, better create a ScrollTrigger instance that handles that particular animation instead of approaching it that way, is far better in terms of performance. Happy Tweening!

Hi, I have zero experience with Barba, but what I can tell you from creating transitions in frameworks like Vue and React is that you have to create your instances after the next route or page has been animated in. So when the animation out of the previous page is completed, you should kill/revert all your GSAP and ScrollTrigger instances. When the new page transition is completed, everything is in the position it should and all the styles added by the transition are removed (be careful here, we've seen some cases where the page transition animation adds some styles that then create issues with ScrollTrigger instances, especially if you apply transforms on a global wrapper and then you create a ScrollTrigger instance that pins something), then you can safely create your GSAP instances and ScrollTriggers. This is more a matter of when and not much what, as far as I can tell. Happy Tweening!

Is it possible to do a gsap Flip animation to do a page transition with ReactJs/NextJs ? I am struggling a little bit :p If yes can you maybe guide me on how to get started ?

Thanks for the reply Rodrigo. So, if I convert my example to include gsap transitions for pages, at what point should I instantiate the scroll smoother? After the transition is complete? And do I need to kill this / reset this each page change? Does this mean the jumping pins is likely because of the funky business with the set time out? I'm going to try and covert the page transition to a GSAP page transition to remove the timeouts. Thanks for the help.

Ok. So literally two weeks ago I didn't know what Nuxt was, but thanks to the wonderful people in this forum, they have helped me get to this stage. My new site in progress with seamless Nuxt3 Page Transitions: gsap.windpixel.com.au. But back to your problem, I added this css into the style.css file to allow both entering and leave pages to be overlapped. They get added into the DOM at the same time, so by default, they stack giving un desirable effects. Here is a working demo for of yours with seamless transitions: https://stackblitz.com/edit/nuxt-starter-sxwssz?file=helpers%2FtransitionConfig.js .page-transiton-enter-active { position: fixed; height: 100%; width:100%; top:0; left:0; right:0; bottom:0; z-index:9; } .page-transiton-leave-active { position: fixed; height: 100%; width:100%; top:0; left:0; right:0; bottom:0; /* z-index:4; */ } I added back the logic to track when page transitions are starting and ending, this is vital to the site working as you need to fire and cleanup certain things when the pages are done. I also made a const to handle the duration for enter and leave, these should be the same so makes sense to tie them together. import gsap from 'gsap'; import { useTransitionComposable } from '../composables/transition-composable'; const { toggleTransitionComplete } = useTransitionComposable(); const duration = 0.6; const pageTransition = { name: 'page-transiton', mode: '', onEnter: (el, done) => { gsap.set(el, { yPercent: 100 }); gsap .timeline({ paused: true, onComplete() { toggleTransitionComplete(true); done(); }, }) .to(el, { yPercent: 0, duration: duration}) .play(); }, onLeave: (el, done) => { toggleTransitionComplete(false); gsap .timeline({ paused: true, onComplete: done }) .to(el, { duration: duration }) .play(); }, }; export default pageTransition; I hope that helps. If your journey is anything like mine, you will encounter quite a few problems to solve, but once you get past that, full page transitions are amazing! - Lance

Hi, i'm very new to greensock just couple of days old, i'm building a gatsby site where i wanted to use greensock for animation specially for page transition using gatsby "page transition plugin successfully integrated animation works on page transition. next part is i have portfolio thubmails when we click on thumbnail, thumbnail should go fullscreen and than second pages appears. but im unable to fix thumbnails animation, please check codepen ( it was for single image and was working fine but i modified the structure ) mainly i want to recreate this http://clapat.ro/themes/satelite-wordpress/classic-portfolio/

Hey Guys, I was really hoping someone could help, I've been searching for hours, I'm trying to do what looks to be like a video page transition and was hoping if it can be done with GSAP or what you'd recommend The transition can be seen on this website: https://www.netflixshadowandbone.com/ If you 'Enter' and click into either 1 of the 4 selections - top right eagle, you will see a 'smoke' like page transition that looks amazing I see the video in the source linked: https://www.netflixshadowandbone.com/uploads/version/1620299202277/static/webgl/transition/mask_smoke_1080p.mp4 But I cannot seem to find out how they are doing this transition I really appreciate you guys for helping so much, this is nothing I've seen on any website

Yeah, keep in mind that those files (route views) have nothing to do with the actual page transition, that is done in the component with the SwitchTransition. Whenever something breaks because of a page transition look either there or in the router file. Great to hear that this helped and sorry for the delay in the response. Happy Tweening!

Hello, I came across a website from the Showcase on GSAP, and I really liked the animation they'd done when switching/changing between the pages, and below is the website for the reference. https://andersonsupply.com/ I tried to checkout the GSAP Products but unable to find what kind of Page Transition they'd used using GSAP, can anyone help me with that how I can add the similar Page Transition in Nextjs using GSAP? waiting for your valuable reply, Regards, Dhaval

I am looking for a page transition effect when clicked on a smaller image and then that small image is going to animate and cover the full screen and now will behave as a different page... Refer to this portfolio website :- https://www.chriswilcock.co/ (Just click on any image like: Discovery Land co, Bear Grylls, etc..), a liquid kind of page transition happens, if you look at the url while transitioning, it is actually a different page... Addon:- I think this page is using barba.js for the transitions, but please help me, because I want to create a similar transition, and I am also using locomotive scroll on my website.

I haven't made much progress into identifying what is causing the page jump other than it appears to be directly related to something I'm doing with scrollTriggers on the about page. I added a ton of logging and an extra few pages in the stackBlitz example and I'm seeing the following. Transitions to any combination of pages that are not the about page seem to function fine without a hitch on the scroll when navigating to a new page and firing the page transition (index to long, long to longer, longer to index, etc). It doesn't seem to be the single #transition-overlay element in the page transition onEnter onLeave events. I made the transition overlay hot pink so it's visibly noticeable. I'm noticing some interesting numbers when logging the scroll on the about page (attached). if I comment out the scroll triggers from 63 to 114 on about and run the page, the transition issue isn't there anymore.

Ok. Solved. Thanks all The animation and timing is perfect, but when new page gets added to the DOM, it is stacked (display:block), tapping into the native css classes vue/nuxt offers, I just set the following styles. Min Dem updated, now truly seamless, each page is butted up against the last: https://stackblitz.com/edit/nuxt-starter-d3iqbd?file=assets%2Fstyles.css As mentioned, the leaving page "jumps" top the top on page transition start, but ill come up with a work around for that .page-transiton-enter-active, page-transiton-leave-active { position:fixed; top:0; left:0; right:0; bottom:0; }

Hi! This is my first post. I'm Luigi and I found out GSAP and this forum recently. 🙂 I want to reproduce the page transition animation triggered by the user when clicks on "Previous" or "Next" areas at this website: https://headline.vision/2022_08_29_B Debugging the frontend code, I discovered that the animation was created with GSAP. So I started to search code snippets on websites such as Codepen but right now the most similar (but not enough for my desiderata) stuff I discovered it's this: https://greensock.com/forums/topic/17845-melting-background-animation Do you know how to get the code for a similar animation or recreate it from scratch? Thank you in advance!

Hi, I will try to define my problem statement in following steps, I have uploaded the images as well for better understanding Main transition section (only left part) will scroll up and settle at top (pinned), please refer to step-1.jpg Right image will be scrolled up till left part, please refer to step-2.jpg and step-3.jpg When the above transition done, then "Yes, Hello" will appear at centre of the page, please refer to step-4.jpg one the "Yes, hello" appears then all these will scroll up together, please refer to step-5.jpg

@Rodrigo Thanks for providing this approach for page transitions in React I'm finding it really helpful in my learning. I was wondering is there a simple way to make it execute the enter and exit transitions at the same time? That's the part I can't figure out as it seems to have to run the exit first, then run the enter transition. Thanks!

I'm experiencing inconsistent behavior with GSAP scroll trigger animations not firing consitently in a Vue component. Sometimes when I visit the page, the animations run as expected, but other times they don't trigger at all. I'm using Vue's onMounted lifecycle hook to set up the animations on a list of elements. Here's a simplified overview of my setup: I have a Vue component that renders a list of elements using v-for. Each element in the list is assigned a ref (blockRefs). In the onMounted hook, I'm using GSAP's context to animate these elements as they enter the viewport, controlled by ScrollTrigger. The issue is that the animations are not consistently triggered upon visiting the page. Sometimes they work perfectly, and other times they don't activate at all. I'm wondering if there's a potential issue with the way GSAP's context or ScrollTrigger is interacting with Nuxt/ Vue's reactivity or the component lifecycle. Any insights or suggestions on what might be causing this inconsistency would be greatly appreciated. I've set up a demonstration on StackBlitz to showcase the problem. You can find it here:https://stackblitz.com/edit/nuxt-starter-6alb54?file=pages%2Findex.vue Details of the Demo: Project Structure: The demo consists of two project pages and an index page. Observation: When you visit the project pages and then return to the home page, the ScrollTrigger animations do not activate as expected. Additional Insight: Interestingly, if you go into the Nuxt Config and comment out the page transition setting, the ScrollTrigger then works correctly. This behavior suggests that there might be a conflict or an issue with the interaction between Nuxt's page transitions and GSAP's ScrollTrigger within the Vue ecosystem. I suspect the problem lies in how the lifecycle hooks are managed alongside the transitions, possibly affecting the activation of the ScrollTrigger. Any insights, especially regarding the interaction between GSAP's context, ScrollTrigger, and Vue's lifecycle within the Nuxt framework, would be immensely helpful. I'm looking forward to your thoughts and suggestions on how to resolve this inconsistency. Thank you!

Hi Rodrigo, thank you for the help. And yes that is the same issue, so please feel free to remove that thanks. Do you think that it would be best to rely on GSAP for all my page animations if I am using ScrollTrigger in that case? I want a simple fade in on route change, so felt like it would be simpler to do with CSS. The benefit of using GSAP would be that I could use a composable to track when the transition is complete? In this example https://stackblitz.com/edit/nuxt-starter-bthjlg?file=pages%2Flayers.vue you use the composable to track state of the page animation at the page level. Is it possible to hook into this transition complete state at the component level? As this is where I would actually like to instantiate my scrolltriggers after the animation. Thanks for all the help.

Hi, The main issue is that your transition doesn't have a mode, so at some point both elements are in the DOM at the same time, which causes a layout issue, that's why you see the jump or that the animation doesn't happen. If you give your transitions a long time and inspect the DOM you'll see both elements at the same time in the DOM. That's why we use the mode out-in in our examples: https://vuejs.org/guide/built-ins/transition.html#transition-between-elements If you check this simple example created by the Vue team and delete the mode prop in the Transition component, you'll see the issue at a smaller scale. That is exactly what's happening in your example but at a larger scale. So adding a mode out-in to the transition config object fixes that. const pageTransition = { name: 'page-transition', mode: 'out-in', css: false, onBeforeLeave: (el) => {}, onLeave: (el, done) => { gsap.to(el, { opacity: 0, duration: 0.4, ease: 'expo.out', onComplete: () => { done(); }, }); }, onBeforeEnter: (el) => { gsap.set(el, { opacity: 0 }); }, onEnter: (el, done) => { gsap.to(el, { opacity: 1, duration: 0.4, ease: 'expo.in', onComplete: () => { done(); }, }); }, }; Finally is worth noticing that you're not toggling the transitionComplete property from the composable, so your ScrollTrigger instances are not being created, just an FYI. Hopefully this helps. Happy Tweening!

Hi there, I'm creating my personal site with WP, and I'm trying to create dynamic effects to make my site more fluid and interesting to visit. I want a background image effect, a page transition effect and a scrolling effect. For example, I want to copy this kind of effect to practice this kind of thing : https://360pm.net/ -> Spiral distortion on background, with an additional touch effect on mobiles. https://360pm.net/projects -> The zoom out on the background, switching images one by one, and changing the background when hovering over an element. https://360pm.net/contact -> Smooth scrolling with the page elements I've been looking for solutions on the forums for a few days now, but I still don't know what techno to use for this kind of dynamic effects... I've been looking at Three.JS but I don't know if it's really what I need... Would anyone please have a tool that they particularly like, and also could GSAP allow me all these effects? Thank you, I really don't know who, or where, I can ask and I'm really blocked...!

i was trying to achieve the page transition in reactjs just like https://www.reed.be/en/work in this site. When clicking on the image it resizes from the current position to next page. that kind of animation was i looking for. Can anyone help me?.

Hi, The issue is that you didn't fully checked the explanation in this SO answer: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children And the explanation I gave on the subject: That's why in the demo I link there we're using this line: onEnter={(node) => { gsap.set(node, { autoAlpha: 0, scale: 0.8, xPercent: -100 }); gsap .timeline({ paused: true, onComplete: () => { // HERE!! gsap.set(node, { clearProps: 'all' }); toggleCompleted(true); }, }) .to(node, { autoAlpha: 1, xPercent: 0, duration: 0.25 }) .to(node, { scale: 1, duration: 0.25 }) .play(); }} That basically removes all the transforms from the parent node in the route view which causes the issue with pinning as explained. Here is your transition config: onEnter={() => { toggleCompleted(false); gsap.set(page.current, { autoAlpha: 0, scale: 0.8, xPercent: -100 }); gsap .timeline({ paused: true, onComplete: () => toggleCompleted(true), }) .to(page.current, { autoAlpha: 1, xPercent: 0, duration: 0.5 }) .to(page.current, { scale: 1, duration: 0.5 }) .play(); }} Adding the set instance that clear the props, should fix the issue. Happy Tweening!