Search the Community
Showing results for 'airpods' in content posted in GSAP.
Found 94 results
-
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?
-
AirPods image sequence animation using ScrollTrigger
Daniel Chaboya replied to marius96's topic in GSAP
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. -
.thumb.jpg.d163eecb9750c94848187b91ccbdcfc7.jpg)
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
-
Hey guys ! I wanted to build a component where when we scroll text fades out and new text fades in .I am able to do this for two elements but I dont seem to understand when we have to apply the animation for the second text to fade out and a third text to fade in .(an example would be like in apple airpods website where new text fades in and out when we scrolll).I hope I get some help! This is what I have so far ,I actually saw this code in youtube and edited it! I just want the hi also to dissappear when we scroll and new text say something else also appear!
-
first of all thanks @BrianCross. what about when we add another text? actually the text transitions on apple's airpods pro website exactly what I want
-
Canvas, blobs and bears oh my!! Ok maybe not bears, but sprites didn't fit with the Wizard of Oz theme I was going for ? I have a 13s video that I want to play when the page loads. After it's played, onScroll I want it to replay to 50%, then stop. Basically, the video is a head rotating 360 in 3d space, at 50% it faces right, which is where I want to place my 2nd lot of content. I've searched the forums and found loads of interesting stuff involving airpods, canvas, scrolling sprites, image sequences and even something to do with 'blobs' in videos. Most of it's beyond me, but I'm happy to delve in - I'm just not sure where to focus my search. Can anyone tell me if what I've described is possible and if so, what would be the best way to go about it? Video seems the likeliest and smoothest option, as only play/pause need to be controlled, plus 13s*30fps seems a bit unwieldy, but I could be wrong... Any thoughts would be gratefully appreciated!!
-
@ZachSaucier Hi there! I fixed my code using ScrollTrigger and Timeline, looking at your AirPods example, and I managed to get It working, the canvas .png sequence works and responds to the scrolling position. Still a few things I can't get my head around, I'll post the correct codepen down here so that hopefully it can help. https://codepen.io/jlnsrtr_/pen/PoGdNLE I've set pin to true, but the animation itself won't pin, this keeps me from going further to try and add another animation to the timeline, a simple div fading in and overlapping to the pinned png animation. Of course it's my lack of js knowledge blocking me here and I bet the solution will be the most obvious thing but I'm really stuck at this point!
-
Thanks a lot! Thats actually really close to what I'm trying to do, having a scroll animation on the background with other divs overlapping it, what basically happens with the text parts on the AirPods animation. I'm taking a look at the source code so that I can see what's different to mine "cutting and sewing" for the final result, I'll keep you updated. But really that example was spot-on what I was looking for!
-
AirPods image sequence animation using ScrollTrigger
ZachSaucier replied to marius96's topic in GSAP
In the demo look at the tween that affects the airpods object's frame value. That's what's controlling which image is being shown. Instead of using a single tween for that animation, you likely want to replace it with a timeline of different tweens to give you more control. -
Hey @ZachSaucier, I am using your example from above (canvas + keyframes) and I would like to know how you would enhance the code to pause the keyframe animation on specific keyframes while the text is displayed and then continue playing the animation? Apple is doing this on their AirPods Pro site right here (see screenshot for exact section): Pausing Animation on Apple Website I would be very glad for any input on how to achieve this effect.
-
Hi there! I'm trying to create a page like Airpods of apple. I'm starting from the codepen provided inside the ScrollTrigger documentation. I would like to "freeze" some specific frame for a couple of seconds while scrolling (for example, the 10th frame for a couple of seconds), in order to have time to make some text caption enter on screen on that particolar point. One solution could be to duplicate the same frame multiple times, but I would drasticaly increase the size of tha page. Could you help me find a better solution? Thank you!!
-
Hello, I am trying to achieve a scroll scrubbing animation. Basically I want to pin the canvas element and play the canvas animation. I have achieved the animation using windows mousewheel event but I would like to know how to set it up using scroll trigger pin property and play the requested 234 frames in sync. The idea was inspired from apple iPod page. https://www.apple.com/airpods-pro/. Thanks.
-
Sprite animation sequence with New ScrollTrigger
ZachSaucier replied to Simone Bertoloni's topic in GSAP
People viewing this thread my want to read about how I approached this sort of situation in an actual client project that was similar to the AirPods site: -
Hi Zach, Decided to try and optimise my scroll animation by using the example of the Apple AirPods instead of the bloated javascript from Animate. I am running into a couple of problems: 1. if you scroll up and push it at the top I get error messages because it is looking for image files with a negative number - 00-1.jpg etc. 2. I cannot set the scroll height correctly - it unpins and starts scrolling up half way through the animation. 3. I would like to use ScrollTrigger to control this but unsure where to start. 4. I am getting warnings in Safari: 'This web page is using significant energy. Closing it may improve...etc.' Could this be the multiple event listeners in the code? https://codepen.io/sbest58/pen/vYLMYPo Cheers Steve
-
Sprite animation sequence with New ScrollTrigger
Simone Bertoloni replied to Simone Bertoloni's topic in GSAP
Hi Jack, could you instead show me how you would do the same animation using multiple separate images instead of a single sprite image? Do you have any solution to better manage the uploading of images and the waiting time? In this codepen for example 148 separate images are used: https://codepen.io/j-v-w/pen/ZEbGzyv Single image link: https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg Thanks for your help. -
Sticky elements in the 'Full-Screen Slider' by PointC?
kristoffer replied to kristoffer's topic in GSAP
For the scroll behavior i was actually hoping for a more traditional approach than the Accord website. Like the Apple Airpod website https://www.apple.com/airpods-pro/ except with a scroll that snaps to each page. The idea is to have the engine animation as video or lottie. GSAP will be used for text animation, kind of how it is done on the Accord website.
