Rodrigo

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/poOKWWr Hopefully this helps. Happy Tweening!

Hi @AllBitsEqual and welcome to the GreenSock forums! That's a tall but fun task I must say. If you are using regular DOM nodes Flip Plugin should be the first thing I'd look into: https://greensock.com/docs/v3/Plugins/Flip Now if you're using canvas for this, the plot thickens. I've never been involved in anything like this but I know that @OSUblake has created hundreds of amazing things and I wouldn't be surprised that he crafted something like this, although I couldn't tell you so you'll have to find out: https://codepen.io/osublake Also I would look into google and check some of these results (there are videos of 2 years or even more recent that could provide a good starting point). Hopefully this helps, Happy Tweening!

You should start tinkering with the calculations in order to determinate how much that particular row has to expand, which most likely implies that the other two have to contract in order to accommodate the one that is expanding. You have to go back to the drawing board and put some pen in paper in order to figure this out. Unfortunately this kind of complex logic is beyond the help we can provide in these free forums, we just don't have the time resources to solve this kind of complex scenarios for our users, sorry. You can contact us for paid consulting or post in the Jobs & Freelance forums. My two cents on the subject that this stems from a lack of consideration when creating the HTML/CSS of your setup. For example I would've never used position absolute for the paragraph content. I would use a container for the text on each column stacked normally and move them to the bottom of the element and then use GSAP to move it until you can see just the title and then move them up using yPercent. If the content is more than the height of the element, then add a button at the top and bottom to show more or give a scrollable area to the content. Even further don't allow that much content in those sections. As you can see this is something that is related to app architecting/design and implementation, not a GSAP specific issue. GSAP is doing exactly what is supposed to do. Sorry I can't be of more assistance, hopefully another user can chime in and provide some guidance/pointers in this case. Happy Tweening!

Hi, In your model component just create a GSAP Context instance as well. There is limitation to create just one GSAP Context per app, you can create as many as you need. GSAP Context provides super easy scoping, cleaning/reverting when components get unmounted and many other super helpful perks, but there is no obligation to create just one. For example in your model component you can do this: export function Model(props) { const { nodes, materials } = useGLTF("/src/model.glb"); const group = useRef(); useEffect(() => { const ctx = gsap.context(() => { gsap.to(group.current.rotation, { scrollTrigger: { trigger: "#first", scrub: 0.2, start: "top top", end: "bottom top", markers: true, id: "MODEL", }, y: Math.PI * 2, immediateRender: false }); }); return () => ctx.revert(); }, []); return ( <> <pointLight position={[10, 10, 10]} /> /* REST OF YOUR JSX HERE */ </> ); } That should be enough. Is anything in this particular example that is not working as you expect? Hopefully this helps. Happy Tweening!

Hi, I think we're talking about different things when we're referring to overflowing here, this is what I'm seeing: https://i.imgur.com/ECZSKG2.mp4 What exactly is the issue in this particular case? That is exactly how I expect this to behave, so clearly I'm missing something here 🤷‍♂️ Happy Tweening!

Hi, IMHO there are better approaches to this, but in your case this is already working and as @mvaneijgen says: "If it works, it works" This seems to work as expected and uses the same approach you already have in place, so it should be easy for you to follow: let options = document.querySelectorAll(".options"); // Get the buttons in an array const optionsBtns = gsap.utils.toArray("#map-wrapper div"); let tabs = document.querySelectorAll(".tabs"); let activeTab = 0; let old = 0; let animation; for (let i = 0; i < options.length; i++) { options[i].index = i; optionsBtns[i].index = i; // add the index to the element gsap.set(tabs[i], { autoAlpha: 0, position: "absolute" }); options[i].addEventListener("click", toogleTabs); // Call the same function that is already working optionsBtns[i].addEventListener("click", toogleTabs); } Hopefully this helps. Happy Tweening!

Hi @hwgw and welcome to the GreenSock forums! This is a perfect fit for the Vertical Seamless Loop helper function: https://codepen.io/GreenSock/pen/MWXPgKm Give that a try and if you get stuck at some point and have a GSAP specific question, let us know. Happy Tweening!

Hi @Rejown Ahmed Zisan and welcome to the GreenSock forums! I tested this on iOS Safari 16.x and it works fine. What particular version you're seeing this? Also are you 100% sure that this is not a browser specific CSS/rendering problem? Does this happens if you completely remove GSAP from your app? Have you tried perhaps using backface visibility hidden for the cards. I have no idea if this will work, just throwing ideas out there. Finally we can't do much on a live site, please create a minimal demo that clearly illustrates the problem. Don't include your entire project just the part that is not working. Happy Tweening!

Hi, Your deployed app is definitely behaving differently than the codepen demo on desktop and a touch device. If I was you I would remove everything else from that page and test how it works. If it works as expected then start adding the other blocks to it until it breaks, then at least you'll know exactly where this is being originated. Now if it doesn't work without anything else on the page, then the problem is definitely in your implementation. Unfortunately we can't debug live sites since there is no way for us to look at the code and test things. Sorry I can't be of more assistance. Happy Tweening!

Hi, As I mentioned is quite odd that you have parts of your GSAP code in a JSX file (React component) and another in a separate file. I'd concentrate everything in your React components/files. Here is a React example that uses ScrollSmoother with GSAP Context in it: https://stackblitz.com/edit/react-iqmjfx?file=src%2FApp.js You can fork it and adapt it to illustrate the issues you're having. As I mentioned I have no experience with R3F, but a first step should be to concentrate all your JS and HTML in the React files and components and not use this weird setup you have right now. Happy Tweening!

Hi, Actually there are all visible both in the embedded example and the live one: The reason for having some extra or dead scroll is because you have an end point for the ScrollTrigger instance of +=2000 pixels, so the viewport need at least 2000 pixels of scrolling plus the height of the viewport, which is variable. On top of that you have a fixed element. Honestly is better to use ScrollTrigger's pin option and not trouble yourself with all that: https://codepen.io/GreenSock/pen/dyqKMzE Hopefully this helps. Happy Tweening!

Hi @SeventySeven and welcome to the GreenSock forums! I don't know anything about R3F so I can't give you much advice on that. What actually throws me off is the fact that you have some GSAP code in your Model.jsx file and this script.js file that you're adding directly to the HTML file 🤔, I've actually never seen that before. Any particular reason for that approach? Why not put everything in your JSX files? My best guess is that this is actually a possible cause for your issues. Also I would move all the HTML elements to the React component and keep all the logic there so you have more control over it and you can sync your app more accurately. Also you should use GSAP Context when integrating GSAP in your React projects: https://greensock.com/docs/v3/GSAP/gsap.context() Also take a look at this articles as they provide a solid starting point for using GSAP in React environments: Finally you should use the latest version of GSAP, your example was using 3.10.4. Hopefully this helps. Happy Tweening!

Hi @ag93 and welcome to the GreenSock forums! Just use GSAP Wrap util to offset the end position in the initial setup of the MotionPath Plugin: gsap.set(items, { motionPath: { path: circlePath, align: circlePath, alignOrigin: [0.5, 0.5], end: (i) => gsap.utils.wrap(0, 1, i / items.length + 0.25), }, scale: 0.9 }); https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() Here is a fork of the codepen example: https://codepen.io/GreenSock/pen/ExeRygq Hopefully this helps. Happy Tweening!

Hi @matruck, Actually your example works as intended with or without markers, there is just no scrolling available in the body element, so nothing happens. Here is a fork of your codepen with a few tweaks: https://codepen.io/GreenSock/pen/dyqKMzE Hopefully this helps. Happy Tweening!

Hi, I'm not completely sure I follow exactly what's going on here and what you're trying to do. Keep in mind that Timelines are just containers with special properties that Tweens don't have, that's all. In this case you have a timeline that is nested inside a master timeline. Once the master timeline gets going it will control it's own playhead, of course, but it will also control it's child tweens and timelines playheads as well. Once you update the child's playhead it will remain there, but only the child's playhead will be modified. For example in your codepen if you restart it and quickly click the button, you'll see that the red box jumps to the 1 second position, but as soon as the parent timeline reaches 5 seconds the red box timeline playhead jumps to 0, because at that point the parent timeline is now controlling the child's playhead. Same thing happens if you click the button between 5 and 7 seconds, there is no visual effect because when you click the button, but the child's playehead is set to 0, but on the next tick (normally 16 milliseconds after) the parent timeline controls the child's playhead again and moves it to the position based on the parent's current progress. GSAP is working exactly as expected. In this situation is better to just control the parent's playhead based on the position of the child elements in it. For that is better to create labels as well and use those to control the playhead's position of the parent timeline. Hopefully this clear things up. Happy Tweening!

Hi, I'm not seeing the issue of the scroll going to the top as the out transition is happening 🤷‍♂️ As for parallax, there are several examples out there that you can find: https://www.google.com/search?q=parallax+site%3Acodepen.io%2FGreenSock%2F&oq=parallax+site%3Acodepen.io%2FGreenSock%2F&aqs=chrome..69i57.16543j0j1&sourceid=chrome&ie=UTF-8 Here are just a couple of them: https://codepen.io/GreenSock/pen/QWjjYEw https://codepen.io/GreenSock/pen/OJyPmgX Happy Tweening!

Hi, Most likely it has to do with the fact that at all times you have 5 elements in view, plus the extra elements that are not visible. So I'd assume that if there are no extra elements there will be no animation. If you want to show 5 elements at a time and you only have 5 then just set the initial styles and create a different type of animation. As you mention this is not the simplest thing to create and follow and, as I mentioned in another thread, we don't have the time resources to break down the logic of complex examples for our users, sorry. My suggestion would be to start with something simple and add complexity to it progressively. If you run into a GSAP related question, don't hesitate to ask! Happy Tweening!

Hi, This solves the issue with the ref being null: export default function Container(props) { const ref = useRef(); const [state, setState] = useState(true); useEffect(() => { console.log("let's go", Date.now()); const mm = gsap.matchMedia(); mm.add('(max-width: 399px)', () => { setState(false); }); mm.add('(min-width: 400px)', () => { setState(true); if (!state) return; gsap.to(ref.current, { background: 'blue', }); }); return () => mm.revert(); }, [state]); if (!state) return props.children; if (state) return <section ref={ref}>{props.children}</section>; } As for the other error, remember that NextJS uses UMD modules and not ES modules, so you have to import GSAP and it's plugins from the dist folder: import gsap from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Hopefully this clear things up. Happy Tweening!

Hi Graham, The solution is to use the kill method in the onLeave callback of ScrollTrigger and set the animation progress to 1: https://codepen.io/GreenSock/pen/abaGPPY https://greensock.com/docs/v3/Plugins/ScrollTrigger/kill() Another option is to wrap the sections around a single parent and pin that element <div class="wrapper"> <section class="normal"><p>Section 1</p></section> <section class="normal"><p>Section 2</p></section> <section class="scene"><p>Section 3</p></section> <section class="normal"><p>Section 4</p></section> <section class="normal"><p>Section 5</p></section> <section class="normal"><p>Section 6</p></section> </div> const anim = gsap.from('section.scene p', { scale: 0, }); const st = ScrollTrigger.create({ trigger: '.scene', start: 'top top+=20', end: 'bottom top', scrub: true, markers: true, pin: ".wrapper", animation: anim, once: true, }); Hopefully this helps. Happy Tweening!

Hi, This seems to work in the way you expect: https://codepen.io/GreenSock/pen/dyqejJv Hopefully this helps. Happy Tweening!

Hi, This is more related with CSS than anything else, these styles seems to solve that: .body { position: absolute; margin-bottom: 0; line-height: 1.7; font-weight: 600; font-size: clamp(1rem, 0.15vw + 0.97rem, 1.13rem); color: #fff; opacity: 0; width: 100%; left: 0; padding: 5vw 3.5vw; overflow-wrap: break-word; } Hopefully this helps. Happy Tweening!

Hey Thomas, Unfortunately we don't have time to explain and dissect every bit of logic that goes into our examples (at least you caught me with no time for that now, sorry 😔). On top of that I didn't authored that particular example so I can't explain you the hows and whys of it 🤷‍♂️ Normally when trying to understand how some specific parts of a particular code work what I do is try to simplify the example. For example in this case remove the Draggable instance and just run an endless loop of the timeline, start playing with values and in no time you'll land into the reasoning behind those values and get a better understanding of how the example works and you'll learn quite a bit in the process. Happy Tweening!

Hi, I think the logic in this example should provide you a good starting point based on what you want to achieve: https://codepen.io/GreenSock/pen/RwKwLWK You might want to remove the ScrollTrigger part from it and focus just on the Draggable related stuff. Hopefully this is enough to get you started. Happy Tweening!

Hi, Sorry for the late response 🙏 Unfortunately I can't tell you exactly where things went wrong in your setup or as Bugs says: Instead I forked your codepen and run a completely different approach that seems to work as expected: https://codepen.io/GreenSock/pen/GRXdGGq Hopefully this helps. Happy Tweening!

Hi, Sorry, I don't have any experience whatsoever with Youtube on mobile devices, but what normally happens when I tap on a youtube video on a browser in my phone, it opens the Youtube app. Again I think is a question best suited for Stackoverflow than these forums. Hopefully another user with more experience in this subject can chime in and provide some help. Happy Tweening!