Search the Community
Showing results for 'airpods' in content posted in GSAP.
Found 94 results
-
Hello @Mobius - welcome to the forum. That example tweens on the values of a custom made object const airpods = { frame: 0 }; so you wouldn't really find anything on frame in the docs. Basically it does what you can find in the Getting Started Article at 'What else can I animate?' >>> 'Any numeric value, color, or complex string containing numbers' I also stepped through what is going on in that example in the post linked below. Maybe that will help. For more info on snap https://greensock.com/docs/v3/GSAP/CorePlugins/SnapPlugin For more info on ease https://greensock.com/docs/v3/Eases For more info on scrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger
-
Well that animation is a hoot!!! (sorry couldn't resist ?) Great job. Basically you have to play with the height of the canvas container and the endpoint of your scroll trigger instance. This configuration in the example with the airpods seems to work fine: gsap.to(owlHead, { frame: frameCountAnim1 - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: 0.5, end: "+=350%", // <- THIS }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate }); Since your section height is 400vh and the default start point it "top top", the duration of your ScrollTrigger instance should go between 300% and 400% of the viewport height (don't worry ScrollTrigger does everything for you behind the scenes, you just have to give the instructions). Do some trial and error until you find the right configuration. An endpoint of "+=400%" will finish the animation as the next section enters the bottom of the viewport, while a "+=350%" will finish the animation as the next section top is at the center of the viewport and so forth. You can find more about it in the Scroll Trigger docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger Happy Tweening!!!
-
Hello, I really appreciate GSAP and really enjoy working with it. It is pretty straight forward and I really like the support community is getting around here. It seems like it came my turn to ask a question here. I started creating a page - on scroll revealing the next section with transition of zoom in effect, which is working fine. There is still place for improvement but overall it works fine. In the other hand I need third section of my scroller-page to have canvas with the effect like airpods (on scroll it looks like image is moving) - which when I isolate works fine on a separate page, but I would really like to include it here on the third section of my page. I was trying to check with if statement - asking is it third section - if it is - then tried new scrollTrigger with pin on the class of the third section. When I do that - weird behaviour starts and I am stuck with resolving it. I would really appreciate your help if you can tell me where am I making a mistake? Thanks! -
You could probably just convert the frame number into the associated scroll position and plug that into your ScrollTriggers: let frameTween = gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: 0.5 }, onUpdate: render }); function frameToScroll(frame) { let start = frameTween.scrollTrigger.start, end = frameTween.scrollTrigger.end; return gsap.utils.mapRange(1, frameCount, start, end, frame); } Usage (assuming you create the frameTween FIRST so that it refreshes its start/end values first): ScrollTrigger.create({ start: frameToScroll(200); onEnter: () => gsap.to(...); }); I hope that helps. -
I found the reason - when I set overflow hidden to body on mobile for safari - it is working fine, because like it seems sections are a little bit bigger than the window view, but on the other hand for mobile users in chrome it is not scrolling airpods section. - Now I just added check if browser is safari then add overflow hidden to body.
-
Hello, thanks for the feedback, I appreciate it. I improved a little bit my code with your suggestions, so now for Observer I am checking onDown: () => { if(scrollingUp) { gotoSection(currentIndex - 1, -1) } }, onUp: () => { if(currentIndex < sections.length - 1 && scrollingDown) { gotoSection(currentIndex + 1, 1); } }, and in gotoSection() I am passing true or false to currentIndex sections where I need them to scroll with observer or not. And because every section has different transition - for each of them I am checking is index == that-section (ie 3). For airpods section I set them to false both while scrolling and revealing the images in that section. The thing is now - when I switch to mobile phone - the behaviour is not the same as for desktop. On desktop everything is working fine, but on mobile, it is not switching good between sections, probably because of the tolerance - which I now set to 200. What do you think would be the best tolerance for switch between the sections? I don't want for user to scroll too much, nor to fly over two or three sections at the same time? Thanks for your support, I appreciate it. I even convinced our clients to take the license (Business Green) for this year to support your work.
-
That's because you keep calling gotoSection() over and over again on every scroll event. You're creating more and more and more ScrollTriggers. Very bad idea You need to work out the logic issues in your code. We don't really have the resources to do all of that for you for free. It'd probably be a good idea to add logic to your gotoSection() function that checks to see if the currentIndex matches the new one and if so, just bail out of the function. Also, even in your AirPods section you're running this in your Observer: onDown: () => !animating && gotoSection(currentIndex - 1, -1), onUp: () => !animating && gotoSection(currentIndex + 1, 1), Which means that every 10 pixels worth of scroll, you're trying to go to the next/previous section. It seems to me like a mistake. Don't you want to stay in that section for a certain amount of scroll that's much more than 10 pixels?
-
That worked as a charm, thank you so much. I was successful to remove the forever loop. And now one final question - when using scroller in the middle of observer I "stoped" third section to use observer and trigger scroller to get the animation like Airpods - but I got the on scroll this blinking effect which is causing issues on mobile and on safari and not showing animation smooth. I see in developer tools that inline style for pin element is adding constantly and I am suspecting that is the reason why the animation is not running smooth. Is there any option to remove styling for pinned section? Or you think something else is blocking having smooth animation - frame by frame? https://codepen.io/ivevil/pen/zYWjNeM Thanks!
-
I want to run first timeline (tl) then when I scroll second timeline trigger (tl1) but when I run this code it gives me big gap on the top of my page, when I remove the Pin or change it to false it work perfectly fine, but when I set the pin to my section it create the gap. so basically I want to create something like this apple page. https://www.apple.com/airpods-3rd-generation/ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); var tl = gsap.timeline(); tl.from("#img1", {scale:8,opacity: 1, duration: 1.5, ease: 'power1.easeOut'}); tl.from("#img2", {scale:8, opacity: 1, duration: 1.5, ease: 'power1.easeOut'}, "-=1.5"); tl.from("#title-txt", {fontSize: 30,opacity: 0, duration: 2, ease: 'power1.easeOut'},"-=0.5"); var tl1 = gsap.timeline({ scrollTrigger: { trigger: '#img1', start: 'top top', end: '+=1000', scrub: 0.6, markers: true, anticipatePin: 1, pin: '.sec1' } }); tl1.to("#img1", {x: "-100%", y: "-30%", duration: 1}); tl1.to("#img2", {x: "100%", y: "30%", duration: 1}, "-=1");
-
I've managed to find the solution which was really simple, I'm going to post it here for anyone in the future trying the same thing and close the post. All that was need was to add scroller: "#home-container", under the scrollTrigger like so gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scroller: "#home-container", scrub: 0.5 }, onUpdate: render });
-
Hi everyone, I would like to reproduce the Apple AirPods effect of this pen with ScrollTrigger: https://codepen.io/j-v-w/pen/ZEbGzyv Here is an example made with scrollMagic: https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795 Can you help me join these Pen by using the new scrollTrigger Plugin? Thanks so much
-
Hi guys, I'm new here. I was wondering how to recreate this text transition from Apple website (Airpods Pro page, but it can be found elsewhere, too) with ScrollTrigger. I'll attach a gif, but you can also check it from the official website. It basically pins text at the middle of the page and then it scrolls and fades to display the following text. Thanks in advance to everyone who will help me!
-
Hey @amcaw, No worries at all! I couldn't help myself and dug out my old project files for a bit of a refresher. I've put together a CodePen to show how I got everything working. Hopefully this will get you going and also help other people with video scrubbing and ScrollTrigger. I've tested this across Safari, iOS Chrome, FireFox and Edge, but adjustments may still needed to be made. Just a couple of notes from what I found out on my way getting this to work: I struggled with large video sizes and page load, I had to find a happy medium of video quality and file size. H.264 is widely available, namely H.265 (better in that it compresses more for the same quality, or gives higher quality for the same size). To use it, replace the libx264 codec with libx265, and push the compression lever further by increasing the CRF value — add, say, 4 or 6, since a reasonable range for H.265 may be 24 to 30. Note that lower CRF values correspond to higher bitrates, and hence produce higher quality videos. I contemplated using images instead, see the GSAP AirPods https://codepen.io/AdventurousDeveloper/pen/XWZxLyO What made the magic happen was setting scrollTrigger onUpdate progress to half the FPS of the video to allow the entire video to be scrubbed for the duration of the scroll. Playing around with the end value will extend the length of how long/short you need the video to scrub for. No doubt there may be a more efficient of doing this, so maybe someone else could fine tune further. Hope this helps ? -
Thanks so much really appreciate that I just wanted to clarify something as well When you scroll down this page: https://www.vanmoof.com/en-GB/s5 The text that comes in with the masking box on scroll that says 'Revolution, built in' , can this all be done with clever use of ScrollTrigger (and perhaps scale and opacity on scroll)? Also the rather complicated graphic below (which I can only akin to the Airpods tutorial where the background moves on scroll and text comes up over the top), can that also be done with expert use of ScrollTrigger? (Indeed, was this animation itself done with ScrollTrigger?) Thank you very much
-
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)
-
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.
-
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)
-
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)
-
Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas. function render() { context.drawImage(images[airpods.frame], 0, 0); } If the images have a transparent background, then it would be only 2 lines. function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[airpods.frame], 0, 0); } https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6
-
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
-
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.
-
Does anyone know how to fade a text in and out again using the ScrollTrigger Plugin? Like the Apple Airpods Pro Product Page: https://www.apple.com/airpods-pro/ On Scroll the Text slides up and simultaneously fades in. If we scroll further the text fades out und the next text fades in. I've found a similar pen but the section only fades out. Thank you for your help!
-
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 }, });
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
