Search the Community

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.

Hi all, I'm wondering why my timeline isn't behaving like a normal timeline in this example. As in: the h1 title animates immediately and doesn't wait for the previous animation to finish. I'm also wondering if it would be possible to animate a second canvas after all this and if that would be advisable (performance wise). Thanks in advance!

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

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

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!

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

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.

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

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!

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 and yes another airpods question (sorry)! The animation is running fine on desktop and also iphone. but on my ipad the animation is not smooth at all. the main difference is that I pinned the canvas. const canvas = document.getElementById(hero); const context = canvas.getContext("2d"); canvas.width = 1920; canvas.height = 1080; let startTop = 75; let frameCount = 33; const currentFrame = index => ( `images/content/anim/hero/gate_${(index + 1).toString().padStart(3, '0')}.jpg` ); const images = [] const thegate = { frame: 0 }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } gsap.to(thegate, { frame: frameCount - 1, snap: "frame", ease: "none", duration:"3", scrollTrigger: { scrub: true, pin:$("."+herocontainer), pinSpacing:true, start:"top "+startTop+"px", }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate }); images[0].onload = render; function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[thegate.frame], 0, 0); } hope you have any idea how to improve the ipad performance. thx! ToM

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!

I am just trying to understand the concept of how to achieve apple the scroll animation. My problem is that I don't understand how the transition from one scene to the new scene works. Apple Animation As soon as the first scene is completely done with the animation, the next scene jumps in without having the scroll effect of the second scene. How do I achieve this transition in GSAP? Thanks a lot