All Activity

Hi Thanks for your answer. I've tried with batch as well but it seems not to be working https://codepen.io/aieio/pen/JjqoLEm

Hi, The issue is definitely not related to GSAP but something else in your setup (most likely CSS). I forked and simplified your demo to work with a click event in the window with the text being visible at all times, when you click the SplitText instance is created then animated and when the animation is completed, the SplitText is reverted: https://codepen.io/GreenSock/pen/KKLwQZp As you can see everything is working as expected. Maybe going from display none to flex could be causing this, but as you can see is definitely not a problem with the way GSAP and SplitText are working. Hopefully this helps. Happy Tweening!

Hey Fernando! Indeed this is mostly about JS logic. What you have to do is check if a previous element exists in the array based on the current index value inside a forEach loop: const elements = gsap.utils.toArray(".list-element"); elements.forEach((element, i) => { const previousElement = elements[i - 1]; // undefined for 0 if (previousElement) { // Create your animations for current and previous the elements, in/out } else { // Set the initial state (visible) of the first element } }); Checking for the previous element guarantees that the out animation won't be created for the last element and the in animation won't be created for the first one. I simplified the demo to remove the nested loops with just one set of elements: https://codepen.io/GreenSock/pen/pomvabo Hopefully this helps. Happy Tweening!

Hi @Umberto, Maybe this demos can help: https://codepen.io/GreenSock/pen/bGZKWjp https://codepen.io/GreenSock/pen/poBRQRj Also this thread by @mvaneijgen has great information on the stacking cards effect subject: Hopefully this helps. Happy Tweening!

My Goodness 😇😊 Hey, May many thank you. This looks same what I am looking for, I will try this tomorrow and get back here with the result or if I face any other issue .

Hello GSAP community! I'm creating a small quiz and I'm having a problem with word splitting during the entry animation (for view this just click to "Open modal" button). I am attaching a minimal demo showing my problem: https://codepen.io/ProjectDCL/pen/zYQxNoa Here you can see that words "your business" appears without separating the words. I also need to revert the animation after it's done so I can then assign the active class to other text. I spent 2 days trying to find a solution (testing replacing my css code and trying to use functions from the ScrollTrigger documentation). Please help me find a solution. I will be very grateful for any help!

Hi, Maybe you're looking for ScrollTrigger's Batch method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch() Hopefully this helps. Happy Tweening!

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

I really can't do it, I'm nowhere near crying, I already achieved the transition like the video you shared with me, but I still need to make some changes that I can't achieve. I thought about doing a forech to be able to detect if it is the first card, that it is visible and only goes up, the rest of the card should act normally, they appear and disappear, and if it is the last one it only appears, it does not have to disappear. like a vertical slider. and then I have to apply the same logic with the navigation, once I achieved those animations I thought to see how to add a label to each card animation, to relate the navs when clicking to make me scroll to that card animation. could you give me a little help? Tell me that I'm doing everything wrong.

Hello, I created a simple scrolltrigger animation that shows text when a card become visibile in the screen. Since I have multiple similar cards on my page, I thought it would be good to apply the same code to all of them together. I tried with a loop but it seems not to be working, can you help me understand what I'm missing? Thanks!

Sorry, this is the example https://codepen.io/umberto/pen/gOJbRPO

Hi, First of all great to register to this community and creating my first post. So, I have been trying this this overlay zoom effect tutorial from this YouTube, to achieve exactly like this one, what I am trying to achieve is done on my testing WordPress website (build with Elementpr pro) this link, Here's the modified custom code from the YouTube guide link : <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script> <script> function overlay_zoom() { const tl = gsap.timeline({ scrollTrigger: { trigger: '.content-scroll', start: 'top top', end: 'bottom top', scrub: true, pin: true, anticipatePin: 1, // markers: true } }); tl.to('.overlay-zoom', {scale:10, duration:2}); tl.to('.scroll-headline', {y: -20, opacity:1}, '<20%'); tl.to('.scroll-btn',{y: -20, opacity:1},'<50%' ); tl.to('.overlay-zoom', {display:'none'}, '<'); } function run_gsap(){ let gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active"); const screenSize = window.screen.width >= 1024; if(window.gsap && window.ScrollTrigger && !eleBuilder && screenSize){ gsap.registerPlugin(ScrollTrigger); overlay_zoom(); clearInterval(gsap_loaded); } }, 500); } run_gsap(); </script> Now, as you can see that the scroll or zooming effect is not as smooth (whether its Scroll3D or something like that being used on the reference website. So, I'd request anyone to guide me on what I'm missing to achieve the target. Thank you

okey really really thank you for resolving my problem. I didn't choose second option because I wanted to use locomotive js on this ane if I wanted to apply locojs I can't give any height to the wrapper div.

Hi @CamiMarie and welcome to the GSAP Forums! I'm very far from being an experienced wordpress developer, in fact I know very little about it, so I couldn't really tell you what to do. Maybe if you have access to the template create a unique id or class that you can use as a selector in your code. Sorry I can't be of more assistance. Happy Tweening!

Hi @Ayush3513 and welcome to the GSAP Forums! That's basically a CSS issue rather than a GSAP one. You're using the scroller config in ScrollTrigger, that basically tells ScrollTrigger to look for the scroll position in that element, by default ScrollTrigger will look for the scroll position in the main window element. Then your main element doesn't have a fixed height so it stretches out to the height of it's children, because of that there is no scroll inside that element. There are two options: Use the default scroller in your ScrollTrigger configuration: gsap.to("#page2 #box2", { x: 400, y: 400, duration: 4, scrollTrigger: { trigger: "#page2 #box2", markers: true, scrub: 2 } }); https://codepen.io/GreenSock/pen/vYwEXRZ Give your main element a height of 100vh: .main { height: 100vh; overflow: auto; } https://codepen.io/GreenSock/pen/rNgaMvB Hopefully this helps. Happy Tweening!

Hi, Actually they're using clip-path inset with round: clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem); https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset If you inspect with devtools you'll see this: element.style { clip-path: inset(2.87718% round 20.2554px); } You should have a look at this thread: Hopefully this helps. Happy Tweening!

Hi, This post by @PointC has an excellent demo for achieving that: Happy Tweening!

Hi, The only Easing functions that accept values that are not documented are Back and Elastic. In the case of the Back easing function the value is pretty simple: gsap.to(target, { duration:1, ease: "back.in(1)", }); The bigger the value, the back easing (in/out) is bigger as well. The Ease Visualizer has dropdowns so you can play around and check that for yourself: For the elastic easing function the first value is for the strength the elastic motion will have, for smaller values the stretching (for lack of a better word) or overshoot is larger: In the second parameter I'm a little fuzzy in terms of what it actually is or how to correctly call it. The simplest way I can use to describe it is the frequency (repetitions) that leads to the ease to either increase (ease in) from a linear easing, or decrease (ease out) to a linear easing, based on the progress of the tween, that's why those values range between 0 and 1. Any other easing function that takes values is documented in our docs: Hopefully this helps. Happy Tweening!

I am trying to resolve this problem from 2 days but still its not working properly. when I scroll the scroller-start and scroller-end is also coming with the scrolling that's why my scrollTrigger is not working . I hope you will resolve my problem as soon as possible

Hi everybody ! I finally decided to start from the beginning, and understand how Observer works. And after a lot of research and testing, I finally managed to do what I wanted. I mark the topic as resolved. Have a nice day/evening everyone!

I have a question. How do I lock panels when scrolling? When I scroll to panel 2, panel 1 goes up, and I would like it to stop It's possible Thank you

You can search for this animation using the keyword "Apple TV parallax." Some examples you can check out: https://codepen.io/iremlopsum/pen/WzKBpE https://codepen.io/thomasxiii/pen/MaByJa

Hi guys, I'm trying to recreate the scaling effect that Apple is using for their Apple Watch page (https://www.apple.com/watch/), but haven't achieved the desired result yet. Currently, I'm using scale to shrink the images as I scroll down, it works as expected but the image shrinks along with its container frame. I want only the container frame to shrink while the image maintains its original size, similar to this video (https://streamable.com/n9xj3e).

https://mewsunfold.com/ the split line in this page is stretching as you scroll. I can't figure out how to implement this right now. is there any example code for this animation effect?