Search the Community

Welcome to the GreenSock forums @eddiedev While GSAP certainly is most widely used to tween on existing HTML elements' values, it can tween on just about any value you feed it with and what you do with that value being tweened on in the end is up to you. That is what's happening in that example in the .to() tween. First the object airpods is created with the key frame and its value set to 0. let airpods = { frame: 0 }; Then in the .to() tween gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: 0.5 }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate }); on the target airpods (the object), gsap can access that key since it was created beforehand. let frameCount = 147; The framecount - 1 tells it to tween to the value of that variable that was created beforehand minus 1 because while there is a number of 147 frames, the array of images spans from index 0 ( index of first frame ) to index 146 ( index of last frame) - that's just how arrays work. Now so far GSAP is only interpolating that value of frame between 0 and 146 and nothing visual is actually happening. That is what the function in the onUpdate callback of that tween is handling then. It takes the value that this interpolation is at while updating the tween and renders out the frame with the number corresponding to the process of the interpolation of the value accordingly. Here is an exmample that is a bit more reduced - which uses the same basis. Only difference is it doesn't render out an image while updating but sets the textContent of an HTML element to what the value is at. As you see, as long as you stick to certain JS logic, it doesn't matter much what the names are. As it is a 100% custom object that is created before the tween, that is why you won't find that property in the docs. https://codepen.io/akapowl/pen/ZEvxRWJ It doesn't need to be fixed though and you can still display other content on top of it (on the z-axis that is). It can be positioned relative in the flow of the page (the surrounding container that is), and when you need it to, you could pin the canvas itself via ScrollTrigger, while the other content in that surrounding container keeps scrolling. https://codepen.io/akapowl/pen/jOYzpxe There is a very popular thread (probably one of the most popular on ScrollTrigger) with regard to that codepen demo, which contains a lot of additional questions and shows how to do certain things within that context. I would suggest diving in and reading through it - it will surely help. But if you are not very familiar with ScrollTrigger altogether so far, maybe it would help to get your feet wet with some less complex cases first. Nonetheless, I hope this helps understand things a bit better.

That just sounds like a timeline to me. You can do anything you like - GSAP is just using JS, so you can write any conditional logic you need! //your code frameScroll .to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10}) // pseudo timeline code animating an image element in the middle frameScroll .to(airpods, {frame: 50, snap: "frame", ease: "none", duration: 10}) .to('h2', {rotation: 360, duration: 10}) .to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10})

Hi @loganvenderlic and welcome to the GreenSock forums! If possible create a minimal demo that clearly illustrates the issue you're having. Besides the fact that you're not resetting the frame between both animations I can't see any issue in your code. The one advice I could give you is to create just one animation and then create the two ScrollTrigger instances where both use the same animation, since you're using the same target: const airPodsTween = gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", onUpdate: render, // use animation onUpdate instead of scrollTrigger's onUpdate }); const stOne = ScrollTrigger.create({ trigger: "#init-gsap", start: "top top", end: "bottom top", scrub: true, animation: airPodsTween, }); const stTwo = ScrollTrigger.create({ trigger: "#init-2", start: "top top", end: "bottom top", scrub: true, animation: airPodsTween, }); Happy Tweening!

Hi Rodrigo, Thanks for your answer! Sorry, maybe my question wasn't clear enough, but as you can see, the airpods animation is still going on when the red title animation (y: -500) is starting. I meant that the AirPods animation should be completely finished before the title animation runs.

Hello ? I have the following GSAP timeline (animating on scroll with scrollTrigger) in the following order: Text element #1 animation Image sequence animation Text element #2 animation The problem: I'm trying to freeze the image sequence on the last image so that it remains visible whilst text element #2 animates. Approach: I have tried the following approach to freeze the image sequence on the last frame but there's a slight delay (visible flash out and back into the last frame): .to(airpods, { duration: 60, frame: 208, snap: "frame", ease: "none", onUpdate: render, }, "start0") .to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", duration: 10, onUpdate: render, }) Any recommendations on how I can achieve this? Thanks in advanced!

Hi and welcome to the GreenSock forums!!! There is a problem with your syntax basically. The trigger property on the configuration object is only used in ScrollTrigger and not in regular to(), from() and fromTo() methods. If you inspect your browser's console you'll see this: Invalid property trigger set to .sec1 Missing plugin? gsap.registerPlugin() Invalid property trigger set to .sec2 Missing plugin? gsap.registerPlugin() Which comes from these: tl.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", trigger: ".sec1", // <- HERE duration: 1 }, '+=1') t2.to(airpods2, { frame: frameCount2 - 1, snap: "frame", ease: "none", trigger: ".sec2", // <- HERE duration: 1 }, '+=1') Updating your code to this seems to do what you're looking for: // First Section let tl = gsap.timeline({scrollTrigger: { trigger: ".sec1", scrub: 1, markers: true, },onUpdate: render}) .to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", duration: 1 }, '+=1') // Second Section let t2 = gsap.timeline({scrollTrigger: { scrub: 1, markers: true, trigger: ".sec2", },onUpdate: render2}) .to(airpods2, { frame: frameCount2 - 1, snap: "frame", ease: "none", duration: 1 }, '+=1') Happy Tweening!!!

If you could make your pen public that would be great - it's much easier to help. I think you just didn't have enough space to scroll. Duration isn't in seconds when it's scrubbed because the user controlls how fast they move through the timeline by the speed they scroll. You can think of duration more like a ratio of the total animation - this animation is 40 seconds, so the first 10 second animation would last for a quarter of the total scroll distance. You can move the end point further in order to make it last longer. let frameScroll = gsap.timeline({ scrollTrigger: { trigger: animationContainer, pin: true, start: 'top top', end: '+=3000px', scrub: 5, markers: true, }, onUpdate: render}) .to(airpods, {frame: 50, snap: "frame", ease: "none", duration: 10}) .to('h2', {color: 'red', duration: 10}, "+=10") .to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10})

Great! However, I tried adding in a delay to the tweens between and it didn't seem to stop the frames from animating. My ideal scenario: // your pseudo timeline code animating an image element in the middle frameScroll .to(airpods, {frame: 50, snap: "frame", ease: "none", duration: 10}) //Somehow pause the frame animation here .to('h2', {rotation: 360, duration: 10}, "+=10") // Keep this in place for 10 seconds .to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10}) // Restart the frame animation here - but would need to start from frame 51. I've done something similar in the past with ScrollMagic and it may be I have to revisit that. But thanks for your help so far.

Hi @Klaas and welcome to the GreenSock forums! I'm not sure how feasible that is. GSAP ticker is ran 60 times per second so that means that the update callback of a GSAP instance is called on every tick. That would create a bit of a conundrum IMHO since you'll have to pause the timeline on every update, wait for the async code to be completed, then resume the timeline and in the next update (roughly 16 milliseconds later) pause it again. You could set the amount of times the ticker runs but that could create a new set of issues. Since the code you're using generates renders of the model, can you create all the models in on sit and use this approach by @OSUblake? https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/?do=findComment&comment=121610 Sorry I can't be of more assistance. Hopefully this helps. Happy Tweening!

Hello @CodyHill I don't think there is an absolute one-way-fits-all solution, so things will probably depend a lot on how exactly you imagine things to be working and how advanced your understanding of ScrollTrigger, JS and video-processing is, in general. While we don't offer tutorials for effects you might have seen on other websites in this forum, searching the forums (and codepen.io, too) is always a great start for finding examples for different effects. For instance, here is a pen showing how to smoothly scroll through a video via ScrollTrigger... https://codepen.io/shshaw/pen/vYKBPbv/9e810322d70c306de2d18237d0cb2d78 ...but be aware that for it to be working smoothly, things mostly come down to using the correct codec/encoding of the video. These other links/threads might be helpful with that regard... https://blog.video.ibm.com/streaming-video-tips/keyframes-interframe-video-compression/ ...and this one here also contains a helper function by @GreenSock for scrubbing through video via ScrollTrigger. If you're having trouble with getting things properly setup for your videos being scrubbed through smoothly, you might want to consider going down a different route, scrubbing through sprites / image sequences instead... ...with this here probably being the most popular thread with that regard, recreating Apple's Airpods Website... ...and these here are my takes on an explanation of what is going on in that Airpods example... ...and an approach for better understanding how to possibly add some text animations to it. As mentioned, things will heavily depend on how advanced your understanding of ScrollTrigger is. If you understand how the basic principles work and have a decent understanding of how to create the proper setup & logic for your needs around ScrollTrigger, i.e. your HTML/CSS/JS and asset preparation, almost anything is possible - if it is not logically impossible. For getting a good grasp of ScrollTrigger's core principles, I'd suggest @Carl's ScrollTrigger Express course - and since ScrollTrigger is tied to GSAP, signing up for his Creative Coding Club will benefit you in general, as he also offers great courses for GSAP in general, and understanding GSAP's basics is sort of a pre-requisite for understanding ScrollTrigger. As for that part; I'm not sure I understand what it is, you are asking here. On that website you linked, I don't see any scroll-triggered tweens or scrolling on the x-axis as you are describing. So if for that question you could maybe try and re-formulate what exactly you are having problems with, alongside a minimal demo of what you have tried so far, maybe somebody will be able to help. Best would be, to also create a new thread for that question, as this does not have much to do with the title of this one, and it might be more helpful for others in future too, if that question would be topic of a different thread. But as I already mentioned above - be aware that this forum is not intended for providing 'how do I do this special effect I saw somewhere else' custom-code solutions and tutorials, as the forum guidelines state. If you do have any GSAP specific questions or get stuck at an approach of yours, we'll be happy to help and/or nudge you in the right direction. In the meantime, maybe this thread might be somehwat helpful with regard to that description of yours concerning the cards. I hope all this will be helpful. Happy scrolling and even happier tweening!

I am using gsap scrolltrigger to toggle a class that makes the container sticky. After the end of the animation when the class is removed it behaves weirdly. Here is the video link : https://drive.google.com/file/d/12WOmmK43dFBxvVLKuDPoAGnOAT4-b76L/view?usp=sharing As you can see in the video after the end of animation it moves it..... Is there any fix to this ? Javascript code : const canvas = document.getElementById('hero-lightpass'); const context = canvas.getContext('2d'); const frameCount = 45; const currentFrame = index => `./assets/medium_${(index + 1).toString().padStart(4, '0')}.jpg`; canvas.width = 600; const images = []; const airpods = { frame: 0, }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } console.log(canvas.width); gsap.to(airpods, { frame: frameCount - 1, snap: 'frame', scrollTrigger: { trigger: '.sticky-wrapper', scrub: 0.5, markers: true, start: 'top 48px', end: 'center 49px', toggleClass: 'sticky', }, onUpdate: render, }); images[0].onload = render; const getheight = () => {}; function render() { console.log(images[0].naturalHeight); const h = images[0].naturalHeight; const w = images[0].naturalWidth; const aspect = h / w; console.log(aspect); canvas.height = aspect * canvas.width; context.drawImage(images[airpods.frame], 0, 0, canvas.width, canvas.height); }

https://greensock.com/search/?q=Airpods&quick=1 Several people are captivated with the Airpods animation as seen in the several posts on this forum. There is a lot that have being said already and there is a lot of knowlage the gain from those post! If you're having trouble with a specific feature of GSAP a minimal demo really helps us help you!

Hello guys, Thanks to the detailed response I got yesterday I was able to advance a little more (I'm still trying to reproduce the AirPods animation in order to get the hang of scrollTrigger). I was able to add more effects (opacity, scale, etc.) but I'm still a bit confused. Firstly, on the apple website, there is more than 1 piece of text that scrolls through. However, I can't seem to find a way to make more than 1 div of text to scroll through. One approach I've tried is using the "onLeave" property to change the text content but I don't think it's a reliable solution as it won't work multiple times as I can't get it to repeat. Secondly, on the original website, there is more than one animation scene (the one presenting the insides of the airpods, etc). I'm not sure how to do anything like that, Is it by using multiple canvases or just wiping the current canvas and starting to display a new animation on it? Also, is there any docs page that states every property that can be changed during the animations (like opacity, x, y ,etc.)? Thanks for reading, any help is appreciated!

Hello again Eddie Additionaly to what Cassie wrote, you'll also find some info on that on the docs-page for the CSS-Plugin Also have a look at this answer in another thread and maybe @Shrug ¯\_(ツ)_/¯'s answer further down in that thread. It's probably by using multiple canvases. @OSUBlake showed an example for something like that in this thread There is an example in that airpods thread I showed you yesterday, showing one possibility of how to do something like that Also this forum has great search-functionality. If you search for 'airpods' you'll find lots of other helpful threads, like these e.g.

Hi, I have landing page with many advanced tweens for example frame animation like AirPods Pro, 3 horizontal tweens with pictures and much much more. When page is loading for the first time it looks normal and the content page loads properly. But when I refresh page when isn’t on top, tweens don’t load well and page content overlaps to each other. Is this a known problem? For business reasons I can't share the code here and it’s too long

Thanks for the quick response, that makes sense, I guess I'll stick to what I have then. I ran a test for the Airpods product page and after seeing the results, I feel a lot better. holmesmillet.dev https://gtmetrix.com/reports/holmesmillet.dev/CRZa3oh4/ Apple Airpods results https://gtmetrix.com/reports/www.apple.com/g2xhC9J3/

Hello again, I've spent some time this week working with Scroll trigger and now image sequences. But run into some issues that I'm hoping somebody can help out with. The issue I have is getting scrollTrigger to work correctly with canvas when pinning the element. On it's own I can get the scroll trigger to scrub the image sequence, and pin the section. However when I add it to another page with other elements I experience issues with the other elements. My assumption is that the elements are being triggered in the incorrect order so in some cases the first pin overlaps the second pin. When scrolled up and down the Canvas flips between transitions and positioned once it hits the end of its animation. My goal: Add multiple pinned sections on the page (from what I've read I might be able to use observer for this instead of scrollTrigger) Don't overlap the pinned sections. Refresh or reposition the other sections. Add back in the MatchMedia queries, so this only works on desktop devices (I'm able to do this part) Unsure about If I need to useLayoutEffect instead of useEffect move the bulk of the code out of the useEffect and pass in the relevant ones as deps The specific file I'm having issues with is the HeroScroll.jsx linked below. I've tried to take use the example from Airpods demos in the forums and update this to work in React. https://codesandbox.io/s/scroll-trigger-react-mulitiple-pins-b0jchy?file=/src/components/HeroScroll.jsx I feel I'm missing something major here but struggling to find the correct way to implement this. It maybe that I can use the observer here instead of a timeline, and assuming that can be used with matchMedia then I can give that a go. Thank you Sean

Hi Seb, Sounds like you just need combine all that into a timeline, kind of like... let tl = gsap.timeline({ onUpdate: render, scrollTrigger: { scrub: 0.5 } }) tl.to(airpods, { frame: 100, snap: "frame", ease: "none" }) tl.to(".my-content", { x: -100 }) tl.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none" })

Hi @maculotti.a@gmail.com, welcome to the GreenSock forums and thanks for supporting GreenSock by being a Club member! I think the issue here is the fact that you have to take into account the size and separation of each frame in the spritesheet and then accommodate the size in the container in order to scale the position and separation accordingly. The spritesheet is a 3600px square with 6 rows and 6 columns, so why are you using these dimensions? var spriteSheet = { width: 778, height: 778, }; When you change those to 600 it works, but the issue is that the spritesheet doesn't seems to be put together properly, since it looks quite weird as you can see: https://codepen.io/GreenSock/pen/BaPKvYo One alternative is to break the spritesheet into single images and use the approach from this airpods ScrollTrigger animation by @OSUblake Another alternative is to use the spritesheet with PIXIJS in order to get an even better performance than in regular canvas: https://codepen.io/osublake/pen/bqEamV Also you should really focus on getting the spritesheet positioned correctly first and then worry about moving it around. Sometimes the best approach is to forget about ScrollTrigger and focus on the correct HTML/CSS setup first, then get your GSAP Animations working as you expect and once you got all that, add ScrollTrigger to the mix. Hopefully this helps. Let us know if you have more questions. Happy Tweening!

You can calculate at what time you will hit a certain frame, and then add a callback to your timeline. So let's say you want to add it at frame 45, and the duration of the animation is 1 sec, you would do this. let tl = gsap.timeline({ onUpdate: render, scrollTrigger: { scrub: 1, } }); tl.to(airpods, { ease: "none", frame: frameCount - 1, snap: "frame", duration: 1 }); tl.add(() => { console.log("hit frame", airpods.frame); // add your class }, 45 / (frameCount - 1))

Hey there @Andy1708 - I deleted your other post as it was a duplicate. But in answer to your question You can give snap a comma-delimited list of properties that you're animating if you need then to 'snap' to the closest integer on update. It's useful in that demo because the airpods.frame should never be something like 5.25221566341. If you were also updating the y value you could snap that property too like so... gsap.to(airpods, { frame: frameCount - 1, y: calculation * 10, snap: "frame,y", }

Hi there, I'm trying to make a draggable (horizontally) image sequence like the one on Polestar.com (see https://www.polestar.com/uk/ , second block down). It's not a traditional slideshow because theres lots of images to scroll through between each slide. The closest thing I can think of is a horizontal airpods scroll, but that's not quite it as it needs to be able to be dragged and it needs to scroll horizontally not vertically as you scroll. I can see a transform translate(X) going on as you drag, as if all the images are laid out across the page? Just wondering what the best way to go about this is/ what gsap tools will help to achieve the end goal? Thank you so much

Elements with fixed position are taken out of document flow as well as elements with absolute position (unless the absolute element resides inside an element with relative position). Pin spacing is something that involves a few things, that's why there is a specific section for that in the ScrollTrigger Docs (scroll past the config options below the middle of the page where you'll find How does pinning work under the hood?) https://greensock.com/docs/v3/Plugins/ScrollTrigger That will depend on your setup and the level of experience you have with React. For starting is better to stick with useLayoutEffect and use useEffect in some specific cases (for example if you need to create a GSAP context instance and add animations to it based on state updates, but I don't want to create confusion here, just remember always start simple and then add complexity to your apps as you are scaffolding them). Also when working with Next is always a good idea to use this little bit by @OSUblake: https://greensock.com/react-advanced#useIsomorphicLayoutEffect I'd try to avoid creating too complex scenarios in React (and any other component based UI library for that matter) in this regard. Sure you could create a master timeline that contains every animation that you want to play in a specific sequence, but normally the logic sequence is to play them as they appear in the screen (for scroll-based animations and every other scenario to be honest, no much sense in playing an animation for an element that is not in the viewport of course). If you have a ver complex setup with a deep component tree, then it would be a good idea to implement something that tells component deeply nested that the previous component is ready so it's that component's turn to create it's animations. But again, this is a very deep topic that can create a lot of confusion if not handled properly. I remember working on a complex ScrollTrigger based site with Next and a lot of nested components and at the end what I did was to create some prop that was passed from the main component to it's children (where each animation was being created) in order to render everything properly. You could use React context for that as well. Keep in mind that in React the render order starts from the most deeply nested child until it reaches the main component in the tree, but again this is something that you have to look into as you work in your projects and not in every single setup since they will vary depending on the project's requirements. Finally in this case this seems to be happening only on development mode so just reverting the GSAP Match Media instance in the component's cleanup function seems to work better: useLayoutEffect(() => { const mm = gsap.matchMedia(); mm.add( "(min-width: 768px)", () => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const frameCount = 148; const currentFrame = (index) => `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index .toString() .padStart(4, "0")}.jpg`; let images = [], hero = { frame: 1 }; const render = () => { // let image = images[hero.frame]; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(images[hero.frame], 0, 0); console.log(hero.frame); //requestAnimationFrame(render); }; for (let i = 0; i < frameCount; i++) { let img = new window.Image(); img.src = currentFrame(i); images.push(img); } images[0].onload = render(); gsap .timeline({ onUpdate: render, scrollTrigger: { trigger: ref.current, end: () => "+=150%", pin: true, scrub: 0.5, markers: true } }) .to( hero, { frame: frameCount - 1, snap: "frame", ease: "none", duration: 1 }, 0 ); }, ref ); return () => mm.revert(); // <- Cleanup! }, []); Hopefully this clears things up a bit. Let us know if you have more questions. Happy Tweening!

Hi! I'm building a website for a client using ScrollTrigger and similar approach as the Airpods example from Codepen. In the Airpod example the animation ( frames ) are played using the scroll, my question is how can one add start to sections of the animations using just one scroll. Using the airdpod example what I would like to achieve is: - 1 scroll => animation plays from frame 0 to frame 40 then stops, - another scroll animation plays from 41 to 100, - another scroll from 100 to 148. So I would have 3 animation sections which would start to play with one scroll each. Haven't added my example to codepen since it's very similar to the Airdpod example, if I could get some ideas or which GSAP plugin to use in combination with scroll trigger, woudl be much appreciated. Thank you!

Hi, I've adjusted the scrub to true and the issue persists. I've added a second title in green to more easily show the issue. As you can see the red title animation immediately starts playing, with the red title animating once the previous animation is done (and this is correct behavior). However, the AirPods animation seems to be stretched over this whole timeline. Edit: Codepen has been adjusted: https://codepen.io/jvlvl-z/pen/gOKxaKe