Search the Community

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.

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!

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.

Hello fellow developers, I started looking into the ScrollTrigger plugin as it seems very interesting, and while looking on the GSAP's codepen profile for different project ideas, I found this nice airpods animation. After looking into the code I figured out how 80% of it works but I still have some questions. Firstly, how does the "airpods" variable work? It obviously increments after each frame but I don't seem to find out where exactly it does that. Also, it uses the function gsap.to(airpods, {....}) which doesn't make much sense as "airpods" doesn't look like a proper html element. Fruthermore, I can't figure out why Inside the gsap.to function there is "frame: frameCount - 1", as the "frame" property doesn't appear on the docs at all. Secondly (this is more of a curiosity of mine), on the official apple website it also presents some features of the airpods while running the scroll triggered animation on the background. I was just wondering how would that be possible given the fact that the animation on the codepen acts like a fixed html canvas, so it would be a pain to display any other kind of media on the website. Thanks for reading all the way, even though some questions might not make any sense at all. Any help is appreciated.

Hi, I've been trying to figure out how to make an animation that is basically a timeline. Due to secrecy I can't really show the animation. But it's really easy to explain the issue. I have two columns. To the left, I have a bunch of images stacked over each other. (they will change by giving them opacity: 1. ) On the right, I have some text blocks. I want to sync each textblock with the correct image to be shown. let tl = gsap.timeline({ scrollTrigger: { trigger: "#timelineSection", start: "center center", end: "+=2500", scrub: 0.5, pin: true, } }); tl .addClass?//Add a class .active to the correct image, that gives the image opacity 1 .to(".text-1", {opacity: 1, y:0}) //fade in the correct text with scrub .addClass?//Add a class .active to the next image, that gives the image opacity 1 .to(".text-2", {opacity: 1, y:0}) Why I want to add a class to the image instead of just animating it within the timeline is because I want the opacity animation of each image to NOT scrub. The image should fade in regardless if I the user stops scrolling or something. So basically, fade in an image by adding the class .active, which contains opacity: 1; and a duration etc. And it should just play. But then you have to scroll through the text animation. When the text is done animating, the class .active gets added to the next image in line. I can't seem to find a way to toggle a class on a specific element in a timeline with GSAP + ScrollTrigger? The same effect can be found here: https://www.apple.com/airpods-max/ if you scroll down to the picture attached.

How about this? Apple AirPods (codepen.io)

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/

Welcome to the forums @hm-tam Loading on demand wouldn't work well because of course it takes time to load, so you'd have a bunch of blank frames, at least initially. The images aren't loaded as part of the initial page load, so I don't see why it would be much of an issue. Apple uses this effect all over their site. Check out the Network tab here. https://www.apple.com/airpods-pro/ If you want a smaller size, you can try scrubbing a video instead.

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" })

Welcome to the forums @DevC One issue with your syncing is that you are not waiting for your video to load. For example, if I cache bust the URL to your video, video.duration will be NaN. If you need to sync up stuff, there are at least 3 different ways I can think of. 1. You add an event listener like timeupdate to your video, and apply changes based on the video's currentTime. 2. Instead of doing video.play(), you actually animate the video with GSAP. Something like this. .to(video, { currentTime: video.duration, duration: video.duration, ease: "none" }) 3. Instead of using video, you animate each frame using canvas and a bunch of images. Apple AirPods (codepen.io)

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))

Hi Akash, I can't even get that sandbox running, but if the video is choppy, it's probably because of the encoding. An alternate way would be to use images instead, kind of like here. Apple AirPods (codepen.io)

Good day! I saw a YouTube Video and LOVED the concept of what was talked about - the creation of the website from "ferrumpipe". You see, creating a Scroll Animation such as the one from the AirPods, where you draw an image sequence onto a canvas on scroll is good, but there's one problem with it. How do you go about adding a section above and below it, so that the user scrolls into the section, sees the animation until the end, and then goes onto the next section? The way they do it on their website is by keeping the canvas inside the viewport through continuously transforming it according to the viewport as seen here: https://gyazo.com/868b3ef3481d082c4cc2fe9587861f6b If the canvas position is for example fixed, it will just float above all the other content and look awful. The creator of the video, Cuberto Design, wanted to release the source code of exactly what I'm asking in this thread on their patreon, yet that doesn't seem to exist anymore. This is my animation (hard to see due to contrast but working): https://gyazo.com/a8321879636882bf90593446f4d70ff1 The user does not scroll into the section, see the animation to the end, and then goes on to the next section - but rather just scroll over it. I hope I could explain the problem well and would be very thankful if anyone knows how to achieve this or by chance even has the source code. Much thanks! _josch

Hello, i'm trying to do build the same video/image sequence style of the Airpods website and also add text. I googled and found this awesome codepen posted in the GSAP forum (see end of post): I'd like to have something like this codepen (scroll after panel 5) : https://codepen.io/GenSock/pen/bGexQpq?editors=0010 But I really don't know how I can do something like this (add a sort of duration maybe ? Or even "scroll-out" when there is no text left to show ?) Here is an example when I try to simply add another div (see screenshot) : you can see that the canvas is still "playing" (the scroll duration comes from the window height not the canvas height/parent height), and also that is goes way beyond the div. So, my question is: how can I make it so it does not goes beyond the div, and that the canvas duration is related to the div size (after div, the canvas is not changing). Also, I'm doing my website with React, and found this npm package : https://www.npmjs.com/package/react-gsap Do you recommend to use it, or should I stick with "basic" gsap ? Thank you .

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", }

got a question in this code : gsap.to(airpods, { frame: frameCount - 1, snap: "frame", scrollTrigger: { scrub: 0.5 }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate }); what does snap: "frame" mean ? and frame: framcount -1 too ?

Hey, I'm wondering how I can use scroll trigger to create an effect like this: apple.com/airpods-pro If it's not possible with scroll trigger that would also be immensely helpful.

It is currently affected by the height of the body - but the trigger can be any element ✨ Here's the scrollTrigger docs gsap.to(airpods, { frame: frameCount - 1, snap: "frame", scrollTrigger: { trigger: '#container' // this can be any element scrub: 0.5, start: 'top bottom' // adjust the start of the trigger here end: 'bottom top' // adjust the end of the trigger here }, });

I'm using an example created by OSUBlake that recreates the functionality of how Apple are animating their Airpods Pro on scroll, but using GSAP and ScrollTrigger. I'm wondering if it's possible to let the sequence run for a few frames, then pause on a specific frame/specific percent of the container that it's triggered by, and then continue for a few frames and pause again in the same manner? I think this really would decrease the amount of images having to be loaded as the sequence I'm testing this code with have a lot of frames that simply are the same, when the object in question is being still for a certain amount of the sequence. If I've understood it correctly, one approach could be to use a Timeline. Are there any examples of how this is done?

Hi everyone, I've been tasked with implementing something similar to the AirPods example, and for the most part I have a working example. However, my animation will sit in between other sections on a web page. This issue i'm experiencing is that pinning the animation sequence does not stop content below the animation from continuing to scroll. So the question is, how do you prevent content below the animation from scrolling into view until the sequence animation has completed? I've only been using GSAP and Scroll Trigger for one day so i'm very new to these products. Any help would be appreciated.

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); }

Yes! that did the trick. But in this way trigger area can be narrow due to size of the element. For example when font-size set to 16px, between the scrolltrigger area narrowses so much and there is not remain enough space to scroll. Setting a padding solved the problem. I think javascript could handle it without tricky ways but this is fine too. Yes but what I want to do is mimic that airpods max animation. So I gotta slide in/out text when entering and leaving the trigger area. I tried using toggleActions but didn't get exactly what I wanted. You can see the problem here: https://codepen.io/ynsmrsk/pen/PomErRV?editors=0010 So I did it like this and it's almost perfect now: https://codepen.io/ynsmrsk/pen/PomEvLR?editors=0010 Thanks for all the help!

Thanks for the answer Jack! As you said I realized scrub is unnecessary for this type of animation. And looping through each element using forEach must be the solution. I can give up using trigger points if it's logic don't go well with the sequenced animations but what I'm trying to achieve is the animation like on Apple's AirPods Max website. If I must make this animation without using trigger points I'm totally okay with that but don't know how to do it anyway. I edited the code like this but can't go further. https://codepen.io/ynsmrsk/pen/gOWoryK?editors=0010

Hi, After animating y axis position in callback functions like "onEnter" in ScrollTrigger, the target moves but its start/end points doesn't follow it. How can I fix it? I'm trying to make a text fade-in / fade-out animation like in the "apple.com/airpods-max" website. I might ask other questions as the work progress. ( eg: how to effectively manage multiple targets for this example )

Hi. Wondering if someone could point me in the direction on how to achieve this "chaining" of image sequences with text in-between found here https://www.chillysbottles.com/uk/story I believe this is done with GSAP. The above looks to be using multiple image sequence canvases. Have searched the forums and have come across the AirPods threads which are great in setting up the image sequence itself.... Just unsure how to then chain some text once the sequence stops then once the text scrolls out fade the next image sequence on top and play. Not expecting a full tutorial - a starting point or a nudge in the right direction would be really appreciated. Many thanks