RubberFruit

Thank you very much for your help! I got a "clumsy", but working visually good animation)) I have 1 more question: if I log in from a mobile device and try to scroll down very quickly, is there such an opportunity to somehow slow down or stop the scroll in front of the section with pin cards so that in the case of a large scroll, the user still starts viewing the section with first card and first text?

I'll show you in the screenshot: on the left - the moment when we scrolled to the section (1 card), on the right - we scrolled to the 3rd card. The distance from the text to the block of cards changes, as does the distance from the cards to the navigation points

Thank you very much once again!) Can you help with the meanings of the cards so that they do not go "to the right and up" when changing? I have no idea why this is happening ... Do I need to change the parameters for the initial installation or what? I updated the codepen once again, it's much better, but I have 1 more question: when resized, the cards lose their position and move to the left on the mobile version + the problem with shifting the entire scene to the right (( https://codepen.io/rubberfruits/pen/OJaLgQv

I did very badly (updated the codepen), but it works! Please can you help me with the following issues: 1) When a new card appears from behind, the entire "scene" with cards shifts to the right (Can you please help with timings and values so that the whole "scene" seems to stay in one place when scrolling) 2) So that the animation ends when the 3 text is in the middle of the screen (so that it does not scroll further up) https://codepen.io/rubberfruits/pen/gOBVLQR

Thanks a lot for your help! I'll try to adapt your example for a scroll trigger) Another question - how can I "stop" the animation for a 3 vertical text element when it reaches the middle? So that at the end of scroll 3 the text element continues to go up?

I updated my codepen, I managed to combine 2 animations and almost achieve the desired result, but I can not understand why onComplete does not fire after changing the z-index ( I want the card to fall into place of the first card, and the same thing happens with 2 so that when the scroll was rotated, but instead they remain in their places) https://codepen.io/rubberfruits/pen/vYVwzbN

Thank you very much, it worked as it should! Can you help with cards? I finished the animation, but it doesn't work at all as it should. How can I make the cards seem to change each other, moving "forward" one by one and going to the end (like on https://www.luminartech.com/), and not all together like mine. I also commented out the text scroll on the left, because for some reason the text scrolls first and only then does the card animation start working. https://codepen.io/rubberfruits/pen/vYVwzbN

Hi guys! I'm trying to make a copy of the vertically scrolling section from https://www.luminartech.com/ (section 5 in a row). I can't figure out why my text on the right is scrolling so fast and can you help / hint how to implement such a cool card change on the right? Thank you very much in advance!

No, I had it tied to the scroll, but each scroll scrolled the vertical text 1 word up, not just the number of pixels up) Is this real?

There is probably a problem with the translator, so it's hard to understand me, now I'll try)) The site is loading, I start scrolling, the main section does not scroll (that's why the pin is set in the settings), at this time the horizontal scrolls (just like it works now, in the codepen above, with the scrub setting - scrolled a little, the text scrolled a little), scrolls to vertical text, but vertical text scrolls differently - no matter how much we scroll, exactly 1 smooth iteration of the vertical text scroll animation is played, which is not tied to scrub (now the vertical text scroll animation plays exactly the same as the horizontal one) The problem is that this is one timeline, which for horizontal text should work as it does now, and for vertical text there should be an iterable animation and I don’t understand how to do it(

Thanks for the answer! No, I abandoned the idea of scrolling to sections, I wanted to know if it is possible to combine the scrub animation of the horizontal text scroll and the scroll (which you showed in the example) for vertical text))

I have one more question)) How can I make it so that the animation of the vertical text is applied animation so that "1 scroll with the mouse wheel" = "1 change of the vertical word"? I can't figure out how to do this because the timeline is attached to an animation that: 1 - scrub 2 - main section is in pin state 3 - animation should start after scrolling horizontal text(

I found where the error was ... I launched the animation for the first section after the window.load event, and for the second section without this event ...)) Thank you very much for all help))

Thank you very much, I'll try)

At the moment, it works as if the ScrollTrigger from the second section does not know that the main section is in the "pin" state and about 1/3 of the animation of the main section, the animation of the next section begins (as if the main section is not in the "pin" state) My page will consist of 5-6 sections and when we scroll the fixed block should move smoothly (no scrub). Example: 1 section - the block is in its original position - left:50%; bottom:50px;, 2nd section - fade to left:60%; bottom:100px; etc. FLIP plugin? Ok, thanks, I'll definitely take a look and figure out how to use it!!)

Hi, yes, that helped a lot, thanks a lot! Do you think it's better to leave the user to scroll? What could be wrong with the problem I described in point 2? Is there also a better way to track the start of the ScrollTrigger after the animation ends with the first section? Are there any examples of animating a fixed block across the entire document? I thought about attaching a trigger to the "body" and tracking it. Is this a good idea or is it better to do something differently?

Thank you very much, you helped me a lot!! Another question, are there any resources / videos / courses that show the advanced level of using GSAP? (except for the library - unfortunately, English is not my native language and I would like to see the result on videos or articles)

Hi guys ! I'm trying to make a transition animation from the first screen to the second, but it doesn't work out completely. 1) How it should look like: the horizontal text scrolls to the left, reaches the vertical scroll, the vertical text scrolls (to vertical4 in the example), and then a decorative block with a white stripe goes from top to bottom, which disappears after a moment and the main section smoothly scrolls to the second one and all this time the main section is in the pin state, the user does not have to "scroll" the page. What goes wrong: a decorative block with a white strip appears, but only (!!!) after the 1 section exits the pin state and scrollTo for some reason does not work, but rolls back the previous animation ( Please help! 2) I couldn’t show this with an example, but for some reason my ScrollTrigger of the next section works locally as if the first section is not in the pin state. Why can this happen? 3) This project will have a fixed block (small picture with message), which, while scrolling throughout the document, will change its coordinate. (section 1 - init position, section 2 - smooth movement to another fixed position, section 3 - smooth movement to another fixed position) How can I implement this? Please help, I will be eternally grateful!

Thanks a lot! Your third option worked exactly as I wanted!)) Another small question: if I want the opacity animation to start a little later, do I need to make a separate timeline for this, or can I somehow set a delay only for opacity immediately inside "from"?

Hello!) I made an example and it is very similar to what is happening in the video. Why is there a delay here too, although I did not specify it? Attached to my first comment) I really want to get such a result : so that after passing the beginning of the trigger, the animation is played completely, without reference to the scroll (opacity and translate) and so that from the beginning of the first animation (header) all animation traces go with a delay of ~ 0.1ms (to have a consistent effect). How can I add such a result and what have I already done wrong?

Hello! Guys, can you help please. I want to animate the appearance of each labeled block with transparency and exit from the bottom, so that each next element appears with a small delay. I tried putting the position attribute in from (which comes at the very end), but it didn't work, I tried staggerFrom - that didn't work either. As a result, I got it and I don’t understand why there is a delay between animations, although I didn’t specify it, but this doesn’t suit me either, because it works too fast (duration doesn’t work, the delay attribute does not affect the delay itself between elements). Moreover, the animation on the buttons does not work for some reason (showed on the video, although the blocks are marked). Can you suggest what I'm doing wrong? Thank you! Link to current result : https://veed.io/view/ebbb758d-974b-451c-9cac-8877cc09f0b9 gsap.config({ autoSleep: 60, force3D: true, nullTargetWarn: false, trialWarn: false, units: {left: "%", top: "%", rotation: "rad"}, }); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.normalizeScroll({ type: "touch", }); ScrollTrigger.config({ limitCallbacks: true, ignoreMobileResize: true, }) const animationTl1 = gsap.timeline({ paused: false }); let animationItems1 = gsap.utils.toArray("[data-animated-item-from-bottom-with-delay-slider]"); animationItems1.forEach((item, i) => { animationTl1 .from(item, { opacity: 0, translateY: 100, duration: 0.5 }) }); ScrollTrigger.create({ animation: animationTl1, trigger: "[data-slider-animation-section]", start: "top 55%", end: "top 55%", scrub: 2, });

I had to rearrange scrub from boolean value to 1)

Thank you very much, I made it vaguely reminiscent of the desired result!)) Can you help me: I removed the scrub from the text so that on 1 scroll the full animation is played with transparency and the text moves up, but then the ability to play the animation back disappears if I scroll back up( achieve the desired result without a scrub?

Hello everyone, I'm new to gsap, can't find a codepen animation example like on main appletv screen(https://www.apple.com/ae/apple-tv-plus/), didn't find ScrollTrigger in the demos either. Can someone give me a hint or link to codepen with similar effect? Apple-TV---Apple-AE-_Trim.mp4

I use it for a different look and feel and the whole project is already built on using it That is, you suggest that the card should not be fixed at the top of the screen, but gsap itself scrolled it to the top?