Rodrigo

Hi @Levin Riegner, In the config object passed to the SplitText constuctor, from the SplitText docs: tag String - by default, SplitText wraps things in <div> elements, but you can define any tag like tag: "span" const split = new SplitText(yourElement, { tag: "span", }); Hopefully this helps. Happy Tweening!

Hi, In the transition context file, just set the initial value for the completed boolean to true. const [completed, setCompleted] = useState(true); Since the boolean is always set to false in the onEnter hook it should work as expected. Just in case though as an extra safety measure I moved the toggle method to the onExit hook of the transition component just in case: onExit={(node) => { toggleCompleted(false); gsap .timeline({ paused: true }) .to(node, { scale: 0.8, duration: 0.2 }) .to(node, { xPercent: 100, autoAlpha: 0, duration: 0.2 }) .play(); }} That seems to work as expected. Happy Tweening!

Hi, You can definitely use GSAP for the animations, but for the other part my first approach would be a physics library that handles that particular part. Of the top of my head I know that the Inertia plugin tracks velocity, end values and Draggable will track direction, so you can definitely get some data for the element being dragged. How that will affect other elements "linked" to that one? That might be the key here and the most difficult part of this. https://greensock.com/docs/v3/Plugins/Draggable https://greensock.com/docs/v3/Plugins/InertiaPlugin Hopefully this helps. Happy Tweening!

Hi, Content sliders are not the easiest thing to do and the links in your setup definitely are not working as expected. The behaviour right now is a bit erratic. Unfortunately we don't have the time resources to fix complex logic issues or create custom solutions for our users. This example by @PointC should provide a good starting point though: https://codepen.io/PointC/pen/YRzRyM If I was you I'd remove Draggable, Inertia and auto-play right now and keep everything manual, as simple as possible. Once you have a fully working example with that, start adding features to it. We are here to help you in that process with any GSAP related issue you have, so feel free to post in this thread or create a new one. Hopefully this helps. Happy Tweening!

Hi, I just tested your example on an Android phone and an iPad and is working as expected, the address bar doesn't hide and all the animations start where the markers are added. Maybe I'm missing something here 🤷‍♂️ Happy Tweening!

Hi, With the current setup you have is a bit tricky. You'll have to set all your cards to an absolute position and animate them to their final positions. Something like this: https://codepen.io/GreenSock/pen/NWMZrbj Hopefully that helps. Happy Tweening!

Hi, There is no hamburger menu in your example and also you're missing some HTML as well: <section class="third"> <div class="outer"> <div class="inner"> <div class="bg"> <!-- MISSING HTML HERE! --> <h2 class="section- </div> </div> </div> </section> Unfortunately there is not much we can do to help with the current state of your demo. Please fix it in order to see the issue you're having. Based on the description you provide, this could be a z-index issue in your CSS, but I'm just guessing. Happy Tweening!

Hi, One solution is to create the cards ScrollTrigger instances first and then create a ScrollTrigger that pins the image and set it's end value using the previous method, in order to set it's end to the last card's end point: ScrollTrigger.create({ trigger: ".image", start: "top 10", end: (self) => self.previous().end, pin: true, markers: true, }); Here is a fork of your codepen: https://codepen.io/GreenSock/pen/gOBqgNm Finally you were using very old versions of GSAP, so I strongly recommend you to update to the latest ones. Hopefully this helps. Happy Tweening!

Hi @CuteAppi and welcome to the GreenSock forums! The reason for this is because of two things: When the ScrollTrigger instance is created in the scroll page, the transition is not yet completed, so ScrollTrigger does it's calculations when the element is still at the left of the sreen. You are using pinning in ScrollTrigger. The transition animation uses transform (Scale and X) and pinning uses position fixed. When an ancestor of a fixed element has a transform applied to it it breaks the way it behaves: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children The solution is to wait for the transition to be completed (as seen in the layers page) and clear the styles of the container that is animated in the page transition. Here is a fork of your example that is working as expected: https://stackblitz.com/edit/nextjs-66r8rm?file=components%2FTransition.js,pages%2Fscroll.js Hopefully this helps. Happy Tweening!

Hi, Just use the normalizeScroll method https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Hopefully this helps. Happy Tweening!

Hi @2Pacalypse- and welcome to the GreenSock forums! I don't have time right now to create a custom example from scratch for this. I know my way around React but I don't know enough about styled components to get it working the way I intend. Here is my idea: Instead of using a regular animation I'd use the Flip plugin to reparent the circle using conditional rendering, this would require an extra wrapper for the circle at and use the onLeave and onEnterBack callbacks to trigger that animation. Also an extra wrapper means that you don't have to pin the circle (actually I think that's the main cause of your issues right now), but you can pin the wrapper and animate the circle a lot easier with Flip. Here is a super simple example using re-parenting to create the animation: https://codepen.io/GreenSock/pen/MWyGoxZ Hopefully this is enough to get you started. Happy Tweening!

Hi @tiny999 and welcome to the GreenSock forums! This is not the simplest of endeavors since you have to consider a lot of things in this one. The first thing that I can see is that you're not using the Flip plugin in the way is intended. You are setting a state value in your Flip Context file and then what? You should make the DOM changes and then tell Flip to animate the element from the state you recorded. This is the most basic Flip setup: Get the state of the element you want to animate using Flip.getState() Change the element styles or move it around the DOM to a new parent. Tell Flip to animate the element using the state you got in step 1 using Flip.from() In your case I'm not seeing 2 and 3 anywhere in your code. Then you have to take care of the route changes and the position of the element. Maybe do the route change programmatically after the Flip animation is completed so it matches the position of the image in the target route. Here is a super simple example of that: https://stackblitz.com/edit/nextjs-bti25c?file=components%2FImagesContainer.js Is not exactly what you're looking for but hopefully is enough to get you started. Happy Tweening!

Hi @aplons and welcome to the GreenSock forums! Sorry about the issues, but honestly I don't have any experience with PHP Storm and not a lot with Typescript. There is a set of files that define the types though: https://github.com/greensock/GSAP/tree/master/types That should be added when you install GSAP in your project. Also there are type definitions for the fromTo() method: https://github.com/greensock/GSAP/blob/master/types/gsap-core.d.ts#L322 And the registerPlugn method: https://github.com/greensock/GSAP/blob/master/types/gsap-core.d.ts#L568 In VSCode I never had any issues with types so I don't know what to tell you. Sorry I can't be of more assistance. Happy Tweening!

Hi, I've been fiddling with the latest codepen for a while now: https://codepen.io/GreenSock/pen/yLRQozy And there are a few things that seem odd to me, like the close event handler: close.forEach((close) => { close.addEventListener("click", () => { // show body content gsap.to(document.querySelector(".body-content"), { xPercent: 0, ease: "Power1.easeOut", scrub: 0.5, duration: 0.7 }); // push modal wrapper out of screen gsap.to(modalWrapper, { xPercent: 100, ease: "Power1.easeOut", duration: 1 }); modals.forEach((modal) => { modal.classList.remove("active"); modalWrapper.classList.remove("active"); document.body.style.overflowY = "scroll"; modalWrapper.scroll({ top: 0, left: 0 }); // remove all style gsap.from(modal, { clearProps: true, onComplete: function () { ScrollTrigger.getAll().forEach((trigger) => { trigger.kill(); }); } }); }); // modal reset progress.forEach((progress) => { gsap.from(progress, { clearProps: true, onComplete: function () { ScrollTrigger.getAll().forEach((trigger) => { trigger.kill(); }); } }); }); }); }); Particularly those loops you have at the end. I removed them but the problem remains. I tried using GSAP Context with no luck. Unfortunately we don't have the time resources to comb through all your code and try to find where this breaks down. My advice is to reduce this to a single button that moves the content to the left of the screen and the modal to the center and make just that setup work. My best guess is that the problem lies in a bunch of code that you have in place that it could be causing this issues. Also when and if you need to clear the styles that GSAP instances add to elements you can use the revert method in the onComplete callback of the longest animation in your close handler or even better, make that a single timeline in the close event. Make the modal horizontal animation a timeline as well and store that in a variable or a GSAP Context instance and then revert which ever you're using: https://greensock.com/docs/v3/GSAP/Timeline/revert() https://greensock.com/docs/v3/GSAP/gsap.context() As I said before I'd make this a single element and a single modal and avoid loops for now. Hopefully this helps. Happy Tweening!

Hi, We don't have single products purchase, sorry. What you can do is buy the Shockingly Green subscription and not select to auto-renew your subscription and it will expire one year after your purchase. During that year you get access to all the bonus tools and it's updates. After that you'll be able to keep using the files you downloaded as we don't include any phone-home scripts in our tools, so your site will keep working as long as you have the files there. You just won't get access to the latest updates of the bonus stuff. Hopefully this clear things up. Let us know if you have any doubts. Happy Tweening!

Hi, Unfortunately I have zero experience with Python and those programs (AE and Blender) so I couldn't tell you. I think that @PointC has some experience with After Effects. If that is true and not a neuron spinning in the wrong direction in my brain, maybe He could share some insight on it. Sorry I can't be of more assistance. Happy Tweening!

Hi, The only thing I can think of is that there is some sync problems between Vue life-cycle hooks and SWUP. A lot of people (myself included) have used GSAP with Vue/Nuxt in production without any issues, so the cause of your issue has to be something else and the only suspect I have is SWUP. You could check the order of execution between SWUP own hooks and Vue's life-cycle methods, maybe SWUP's are called after Vue's and that's causing this problem. Also keep in mind that you're using a SSR setup which, IMHO shouldn't cause this setup to behave differently, but again I have no experience with Astro so I couldn't tell. Unfortunately I can't think of a single reason for the text not being there, also the console is not showing any GSAP related errors so the DOM elements GSAP is using are there and the plugin is installed and registered as expected. Sorry I can't be of more assistance, but hopefully this helps in some way. Happy Tweening!

ScrollTrigger inside a timeline, like this: const tl = gsap.timeline(); tl.to(element, { /* Animation Config */, scrollTrigger: { // ScrollTrigger Config }, }); Which one ultimately controls the animation's playhead, the Timeline or ScrollTrigger? They both are trying to update the progress of that particular animation (to() instance). For scaling down, just use Flip as well in the reverse order. That is: Have the element in it's initial state, that is full width. Get the current state using Flip.getState(). Set the final state of the element to what you want at the end. You can do this changing the styles a class or reparenting the element. Animate using Flip.from(). Here is a super simple example that uses reparenting: https://codepen.io/GreenSock/pen/dygwajQ Hopefully this helps. Happy Tweening!

Hi @p0lm0n3ys, Thanks for reporting back and sharing your code with the community 🥳 Looks really good, great job!!! 👍

Hi, As it usually happens I thought of a better way a few minutes after posting 🤷‍♂️ Using the Clamp utility method is far better and cleaner than the solution I had in place previously: onDrag: (self) => { scrollInstance = scrollTo( gsap.utils.clamp( 0, scrollTween.scrollTrigger.end, self.startScroll + (self.startX - self.x) * dragRatio ) ); }, I updated the codepen example: https://codepen.io/GreenSock/pen/ZEqVMrE Hopefully this helps. Happy Tweening!

Hi, Thanks for pointing this issue. Right now this seems to work: let scrollInstance; Observer.create({ target: ".container", type: "wheel,touch,pointer", onPress: (self) => { self.startScroll = scrollTween.scrollTrigger.scroll(); scrollTo = gsap.quickTo(scrollTween.scrollTrigger, "scroll", { duration: 0.5, ease: "power3" }); }, onDrag: (self) => { scrollInstance = scrollTo(self.startScroll + (self.startX - self.x) * dragRatio); }, onDragEnd: () => { if (scrollTween.progress() === 1 && scrollTween.scrollTrigger.direction > 0) { scrollInstance && scrollInstance.kill(); smoother.scrollTo(scrollTween.scrollTrigger.end); } } }); Although the jump back is not really smooth: https://codepen.io/GreenSock/pen/ZEqVMrE Adding the smooth boolean in the scrollTo method ends up with the same behaviour we have now. We'll look into it and get back when we have more info about it. Happy Tweening!

Hi, Use the same transform origin in your set instance: gsap.set(".banner", { rotation: 90 , transformOrigin: "0% 0%", }); Happy Tweening!

Hi, Right now I can't go through all the code you have in your example. I did noticed a few things. You're using two different effect hooks with the same dependencies array. I'd review that. Then you're not using GSAP context there. We strongly recommend using GSAP context in react environments in order to get proper cleanup. https://greensock.com/docs/v3/GSAP/gsap.context() Also take a look at the resources in this page In order to prevent those jumps use ScrollTrigger normalizeScroll method https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Finally please don't tag users, especially if they don't have any participation in the thread. Any particular reason to tag Zach for example? We understand that users have deadlines and that sometimes there is a lot of pressure for delivering, but keep in mind that we do our best to answer ASAP and it is Saturday and people have other activities in their agendas. Hopefully this helps. Happy Tweening!

Hi, Right now I can’t test in my computer, only on tablet where there is no horizontal section. The few recommendations I can give you is to update to 3.11.5 and perhaps try GSAP Context to wrap all your GSAP and ScrollTrigger instances for easy cleanup when changing the routes using the revert method: https://greensock.com/docs/v3/GSAP/gsap.context() Finally in stackblitz you can create a pure html project with different pages https://stackblitz.com/?starters=frontend Hopefully this helps. Happy Tweening!

Hi, Without a minimal demo there is not much that we can do. The demo you provided is working as expected. If you want to use some sort of link or anchor this could be useful: https://codepen.io/GreenSock/pen/bGexQpq Hopefully this helps. Happy Tweening!