All Activity

i've added this to the JS module right after the tween, but it doesn't work $( document ).on( "ajaxComplete", function() { ScrollTrigger.refresh(); }); Just like that: jQuery(document).ready(function() { console.clear(); // Start with a clean console on refesh gsap.registerPlugin(ScrollTrigger); const showAnim1 = gsap.to("#menuSticky", { yPercent: -100 }) .reverse(); ScrollTrigger.create({ id: "max", start: () => "600px top", end: "max", markers: false, onUpdate: (self) => { showAnim1.reversed(self.direction < 0); } }); $( document ).on( "ajaxComplete", function() { ScrollTrigger.refresh(); }); });

Hello. Can anyone point me to a tutorial, documentation or lib that replicates the effect of this site's logo below? https://vintage.agency/ Thank you very much in advance.

Hi, Actually the scroll is being set in it's position immediately the scrub value makes the position update take 0.6 seconds. Maybe there could be a way using the onRefresh callback, getting the progress of the ScrollTrigger instance and setting the progress of the tween/timeline associated with the timeline to that specific value immediately to prevent the scrubbing effect. If you keep struggling please create a minimal demo that clearly illustrates the issue. Hopefully this helps. Happy Tweening!

Hi, There could be a solution to listen to touch events on links. Maybe check the touchstart event and if there is any scroll prevent the default behaviour in the touchend event. You can use ScrollTrigger's onUpdate callback to toggle some boolean indicating that there has been vertical scroll. Normalize scroll is our best effort to solve several issues that are mostly related to iOS devices that hasn't been solved by the safari team, but there are tradeoffs unfortunately. Happy Tweening!

I'm using Astro, lenis smooth scroll, and the npm package of gsap. Trying to animate some cards on scroll (when they enter the view port) but the scrollTrigger is not working. The animation keeps auto-playing on page load, and the scrollTrigger markers aren't visible. Here's the code (can provide git repo link if needed) let tl = gsap.timeline({ scrollTrigger: { trigger: ".services_wrap", start: "top center", end: "bottom center", scrub: true, markers: true, }, }); tl.to(".service_card", { x: 0, opacity: 1, stagger: 0.2, });

Hi, Yeah this is mostly related to the way browsers work with video rather than a GSAP related issue. What you could try is, depending on the device type, do something specific with the video, like applying the mobile only solution for that particular device. You can try using ScrollTrigger's isTouch property: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Hopefully this helps. Happy Tweening!

Awesome! I didn't know that before. That will be new insight for me also, thanks for your solution!

@mvaneijgen Absolutely legendary reply, thanks so much. I know exactly what everything means, just need to figure out how to stick it together with GSAP I have just (10min ago) run into the issue of having centred images & trying to move them to original positions, so suggesting Flip and duplicating the images seems to be a serious time saver, did not think of that. Great tip on forgetting the ScrollTrigger for now too, sounds like a good time saver to figure out the main problem. I'll work on this until I build it, then will post the solution. I hope.

Hello, I have successfully implemented a horizontal scroll using Gsap, which is functioning perfectly. However, I have encountered a minor issue. I have a "load more" button that, when clicked, adds multiple posts to the horizontal container. After adding these posts, I recalculate the Scrolltriggers "x" and "end" values, which also works as intended. The problem arises when I click the "load more" button, as the Scrolltrigger has a scrub value of 0.6. This causes the scroll to take 0.6 seconds to return to the current location, which appears somewhat awkward. Is there a way to maintain the scrub value of 0.6 during scrolling, but temporarily disable it when clicking the "load more" button, and then re-enable it after the click? I am hoping for a quick solution to avoid creating a minimal demo. If not, I will attempt to recreate the issue. Thank you for your assistance.

Hello @GSAP Helper. I've added my Codepen project. Sorry that I didn't do it at the beginning. Here is a link https://codepen.io/SL-Fama/pen/JjqNvyP

For now I would just forget about anything todo with scrolling. Everything in GSAP starts with an animation, so you first have to build a timeline with the animation on it you want to happen. The logic you're trying to use now is just for that specific effect and not really has the option for customisation. Some time ago I've written a post how to build a similar animation, it has nothing to do with the Observer plugin, but with this logic you can easily hook it to Observer if you add labels to the timeline and the based on my previous demo scroll to labels using the Observer plugin Did a quick demo adding the Observer plugin to this setup showing you working this way how easy it is. https://codepen.io/mvaneijgen/pen/Povmaze?editors=0010

Thank you for you quick reply and for the welcome to the forum https://codepen.io/siko001/pen/mdYmxNe I'm trying to divide it into 2 different functions.. but for the life of me i can't figure this out

Great video! I would just forget about ScrollTrigger all together and just focus on the animation at hand. Yes it will be a timeline and like if you were scrolling everything happens in a sequence. The thing that I see some people get confused by adding ScrollTrigger to the mix is that you would need to get things animating and things scrolling, but nothing is really scrolling (or at least that is how I would build it), things are just animating on the y-axis and when you then hook that to ScrollTrigger (with pin: true) it creates the illusion of things scrolling, but they are just moving from lets say a y: 500 to a y: 0. The exploding of the images to their respective position on a grid I would build with the Flip plugin https://gsap.com/docs/v3/Plugins/Flip/ this gives you a tween that you can also just add to the timeline you're creating. If you need any further assistance just try making the first part of the animation the text coming in and then the images one by one and post the minimal demo there, then someone will be surely pointing you in the right direction. Side note for using the Flip plugin, don't be afraid to fake it, eg you can easily duplicate the stack of images and have one stack for animating from off screen and the other for moving them to the grid. Trying to do this with all the 'real' images will get tricky, but you can easily just do a sneaky tween that sets one stack to opacity: 0 and at the same time add the new stack to opacity: 1. I have the feeling the inspiration site also does. this. If you're looking for a kick start on the images coming in one by one, I've written a post a time back which goes over an animation similar to this and the logic behind it. Hope it helps and happy tweening!

Rodrigo, thank you SO MUCH! 😃

Hi Gang! I'm curious about the logic needed to build this sort of animation. I'm just looking for help in terms of steps needed. If someone has a similar example, I'd love to see it. Link to the website that caught my attention: https://www.mccann.fr/en/ Video of the animation I'm looking at: https://www.loom.com/share/b1494a7326644a5ea5845a24b278013a?sid=f71953bb-e96e-49f7-9673-8155b8e7bb2e In order (as we continually scroll downwards) - Nice TextSplit effect -> centred in the pinned section (still learning how pinning works) - 3 images scroll into the center from the bottom, 1 by 1, overlapping each other and also the text - The 3 images (and more hidden ones) start animating towards their natural spots in a grid (flex/grid, doesn't matter) I think the thing that confuses me is how do I use ScrollTrigger, within a Timeline, element by element, whilst keeping things pinned, etc. I'll learning these concepts NOW, but an example would be super useful. This SEEMS simple to accomplish, but I just don't know how the syntax side might look like. Any guidance is appreciated! Cheers

Ohhh!! I See. got it. but no thanks i already have an account on other forum to help others but never ask them to do so. god bless you thank you.

@Rodrigo Thank you so much for your reply) Really appreciate it. I tried your solution and realised that I just can use scrollTo plugin instead of lenis scrollTo and it works even without need to disable observer and scrollTrigger. Yeah, I have a little bump, but it's okay.)

As you can see in my CodePen example, the trademark sign is seen as a word by SplitText. For smaller viewports, this would mean that the trademark character would break into the next line first and then the word "awesome" shortly afterwards. Since the trademark character belongs to the previous word, it must not stand alone. This would work well if "awesome" and the trademark symbol were recognized as one word. Is there a way to ensure this?

Hi, I experienced a problem with SplitText 3.12.5, that not happened with 3.12.2. I just updated the SplitText.js file and the problem appeared. As you can see in the codepen example, after using revert() the h1 disappears and looks like this: <h1 style="null">SplitText is awesome</h1> With the version 3.12.2, my h1 looks like this after the revert call and stays visible: <h1 style="opacity: 1; visibility: inherit;">SplitText is awesome</h1> (I tried to make two codepen examples, but I don't know how to include an older SplitText in Codepen because its a bonus plugin) As I can see in the changes from SplitText there is a new line with `e.setAttribute("style", originals[i].style);` which was added after 3.12.2. Is this a bug, or do I have to do something different, that just worked until now? Thanks

Hi GSAP Community, I am working on an animation where an element (targetEl) moves between different zones (zoneEl) as the user scrolls. However, I'm facing an issue with tracking the initial position of targetEl correctly. The targetEl is inside zoneEl.first(), which is in another div with a height of 1500dvh and is animated to move from right to left by -100dvh. This movement is causing the targetEl to start in the wrong position, and the animation does not play correctly. Here is the code I am using (fille in attaches): window.addEventListener("DOMContentLoaded", (event) => { // SETUP PLUGINS gsap.registerPlugin(ScrollTrigger, Flip); ScrollTrigger.normalizeScroll(true); // SETUP ELEMENTS let zoneEl = $("[js-scrollflip-element='zone']"), targetEl = $("[js-scrollflip-element='target']").first(); // SETUP TIMELINE let tl; function createTimeline() { if (tl) { tl.kill(); gsap.set(targetEl, { clearProps: "all" }); } tl = gsap.timeline({ scrollTrigger: { trigger: zoneEl.first(), start: "center center", endTrigger: zoneEl.last(), end: "center center", scrub: true } }); zoneEl.each(function (index) { let nextZoneEl = zoneEl.eq(index + 1); if (nextZoneEl.length) { let nextZoneDistance = nextZoneEl.offset().top + nextZoneEl.innerHeight() / 2; let thisZoneDistance = $(this).offset().top + $(this).innerHeight() / 2; let zoneDifference = nextZoneDistance - thisZoneDistance; tl.add( Flip.fit(targetEl[0], nextZoneEl[0], { duration: zoneDifference, ease: "power2.inOut" }) ); } }); } createTimeline(); // SETUP RESIZE let resizeTimer; window.addEventListener("resize", function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { createTimeline(); }, 250); }); }); The problem is that targetEl is positioned incorrectly because zoneEl.first() is animated with a -100dvh shift from right to left. I need to track the initial position of targetEl correctly so that the animation starts at the correct position with the right coordinates and dimensions. I have included a video explanation and a link to my site for more context: Video: https://www.loom.com/share/9bfb3434afcc432b8fb6ab969bed136c?sid=188e85ea-b5a8-42f3-bd02-f52f103f7b57 Website: https://s-liudvichenko.webflow.io Any help or suggestions would be greatly appreciated! Thank you! gsap--flip-ds-layer.js

Ok, let's remove ScrollTrigger from the setup and keep it simple. I've moved your animation to a timeline and now also added the text as an tween to the timeline. The text is bigger than 25vh, so you can also change out the y tween for a yPercent and then tell it to move -100, see commented out code. And I've installed jGSDevTools so it is easier to debug the animation. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/. Then if you still need help try modifying the pen and post back here what you've tried. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tool. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOJWerJ?editors=0010

Maybe this helps. Check out @Rodrigo's demo without any GSAP and compare this to your demo without any GSAP code. https://codepen.io/mvaneijgen/pen/GRamxja?editors=0010 Than check the same demo with GSAP code and no ScrollTrigger enabled. As you can see the boxes are just moving on their own, this is the part you're missing. You're moving your boxes with scrolling, but when working with GSAP it is the other way around. None of these items are scrolling, they are animating from bottom to top on the y axis and when hooking them up to ScrollTrigger it is creating the illusion of scrolling, but again they are NOT scrolling. I see so many people getting tripped up on this and not getting this fact will make using the tools harder, everything in GSAP starts with an animation, there is no amount of ScrollTrigger code that can fix your animation, you first have to build the animation before you do anything else. https://codepen.io/mvaneijgen/pen/eYaWMBR?editors=0010 So my advise remove ScrollTrigger from your demo all together and build the animation you want to happen. Start simple with just the text changing, then check how that would work on scroll, if you need help then post just that simple example to see if you're on the right track. Hope it helps and happy tweening!

Thank you @mvaneijgen for helping me but I have another issue: to keep the video fixed, let's say visible at 25dvh, and make the text scroll below the video, allowing the user to see both the video and the text at the same time. The text should eventually occupy a minimum height of 75dvh and video still visible with 25dvh

Hi @Elysee welcome to the forum! Thanks for the clear demo. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Mainly moved your tween from a .to() tween to a .from() tween, changed your start and end markers and set scrub and pin to true. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOJWerJ?editors=0010